前端新手学习记录2 -使用vscode编写个人网站首页

编写了一个网站首页，参照网上的例子。界面如下

代码如下：

<!DOCTYPE html>

<head>

<title>弹性布局展示</title>

</head>

* {

box-sizing: border-box;

}

/* 设置 body 元素的样式 */

body {

font-family: arial;

margin: 0;

}

/* 标题 / LOGO */

.header {

padding: 10px;

text-align: center;

background: #1abc9c;

color: white;

}

/* 设置顶部导航栏样式 */

.navbar {

display: flex;

background-color: #333;

}

/* 设置导航条链接演示 */

.navbar a {

color: white;

padding: 14px 20px;

text-decoration: none;

text-align: center;

}

/* 更改鼠标悬停时的颜色 */

.navbar a:hover {

background-color: #ddd;

color: black;

}

/* 列容器 */

.row {

display: flex;

flex-wrap: wrap;

}

/* 创建并排的非等列 */

/* 侧栏 / 左侧列 */

.side {

flex: 30%;

background-color: white;

padding: 20px;

}

/* 主列 */

.main {

flex: 70%;

background-color: white;

padding: 20px;

}

/* 伪图像，仅供示例 */

.fakeimg {

background-color: #aaa;

width: 100%;

padding: 20px;

}

/* 页脚 */

.footer {

padding: 10px;

text-align: center;

background: #ddd;

}

/* 响应式布局 - 当屏幕小于 700 像素宽时，让两列堆叠而不是并排 */

@media screen and (max-width:700px) {

.row,

.navbar {

flex-direction: column;

}

</style>

<body>

<p>拥有<b>弹性</b>布局,请调整浏览器窗口来查看相应效果</p>

</div>

</div>

图像

</div>

<p>关于我的简介</p>

<p>更多的信息可以写到这里.</p>

</div>

<p>关于图像的一些简介.

</p>

<br>

<p>第二个图像的简介，可以当作新闻使用.第二个图像的简介，可以当作新闻使用.第二个图像的简介，可以当作新闻使用.

</p>

</div>

</div>

</body>

var app = Vue.createApp({

data() {

return {

message: 'yufuchang.com '

}

template: "<h2>{{message}}</h2>"

})

var vm = app.mount("#app")

</script>

</html>

前端新手学习记录2 -使用vscode编写个人网站首页相关推荐

前端新手学习记录1 -使用vscode编辑html
以前一直使用Hbuilerx编辑html文件,后来发现vscode编辑html文件也不错,从网上反响看的.所以也动了使用vscode的念头. 安装vscode的过程就不说了.下载安装.我的版本如下: ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（二）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(二) 前言定义 Model connect 起来更新state 拥抱变化主题切换更换页面获取当前设备类 ...
第一周前端web学习记录
第一周前端web学习记录 #什么是HTML.CSS? 如何写代码以及在哪里写 vs code 的基本使用方法浏览器网站开发 HTML 的结构基础和属性创建标签嵌套 HTML标签设置属性 HT ...
前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）
前端技术学习记录:react+dvajs+ant design实现暴走计算器的页面重构(一) 前言现在的效果安装 dva-cli 创建新应用预览项目文件结构简单介绍使用 antd做页面定义 ...
2022-07-09 第一小组张明旭前端HTML学习记录
目录心情知识点及学习程度知识点软件架构: 前后端分离浏览器/服务器的开发浏览器基本架构基本标签文本格式化标签: 心情今天是正式学习的第一天,第一次接触前端内容,感觉挺新奇,老师讲课 ...
【学习记录】解决VScode中C语言运行终端输出中文乱码问题
(0)前言本人不是什么大佬,只是在刷了N个帖子后,在评论区的一个老哥留言中发现这个方法在自己的电脑(联想Y7000 2019版)居然可以简单解决了!!!于是写了这个帖子用来记录这个方法!!! 已经看 ...
前端html学习记录
今天是2017年11月3号,这是我进入飞狐教育的第二十五天了,我也算得上是第一个1710班的人吧,我记得最开始来的时候只有我一个人的,没错就我自己,先见到的是于老师(第一次见到于老师的时候,那是在华悦 ...
并查集——新手学习记录
好吧,什么垃圾并查集,并查集什么的都是铁憨憨<+__+> 现在开始复习回忆:(新手,有错误望指正) 什么叫做并查集,并查集就是一个集合问题,其实最主要的就是知道并查集是一个求解集合数目的问 ...
龙书（附录A）：一个完整的编译器前端（学习记录）
(龙书)完整的编译器前端下载地址:ps:我设置的不要下载积分,如果还是不能下载的话请评论区留言. https://download.csdn.net/download/Zheng_lan/167792 ...

前端新手学习记录2 -使用vscode编写个人网站首页

前端新手学习记录2 -使用vscode编写个人网站首页相关推荐

最新文章

热门文章