制作“搜索页面”part1
程序员文章站
2022-06-11 20:44:50
...
制作“搜索页面”part1
1. 打开VSCode，在自己的文件夹中新建网页文件，文件名05baidu.html，输入 “！”，按Tab键自动生成H5网页框架标签。
2. 将title标签内容改为“搜索页面”，在内添加文字素材，分别设置标签和class以及id值
<title>搜索页面</title>
</head>
<body>
<h2>什么是CSS<em>?—CSS教程</em></h2>
<p>
猴子提示: 可以通过简单的更改<em class="red">CSS</em>文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是<em class="red">CSS</em>了,现在就开始学习<em class="red">CSS</em>吧 ...
</p>
<p>
<em class="green">www.dreamdu.com/css/wh...</em>-<em class="gray">百度快照</em>--<em class="gray">85%好评</em>
</p>
</body>
3.在css文件夹中新建文件05baidu.css，在05baidu.html的标签中引入css文件
<link rel="stylesheet" href="05baidu.css">
</head>
4. 在05baidu.css中利用标签选择器、类选择器和复合选择器设置页面的全局样式和局部样式
body {
font-family: "微软雅黑";
font-size: 14px;
color: #333333;
}
em {
font-style: normal;
}
h2 {
font-size: 18px;
color: #d52d2d;
font-weight: normal;
text-decoration: underline;
}
h2 em {
color: #2525d3;
text-decoration: underline;
}
.red {
color: #d52d2d;
}
.green {
color: #167a16;
}
.gray {
color: #595959;
text-decoration: underline;
}
5、两个文件分别保存后在浏览器查看效果
下一篇： 使用新浪SDK.发布带图片的微博