大家好,作为一名互联网行业的小白,写博客只是为了巩固自己学习的知识,但由于水平有限,博客中难免会有一些错误出现,有不妥之处恳请各位大佬指点一二!
博客主页:链接: https://blog.csdn.net/weixin_52720197?spm=1018.2118.3001.5343
1.先分析网页
可以把网页划分为7部分
2.拿取网页的素材
笔记本-Fn+F12
用ctrl+s可以把网页上显示的图片都保存下来
3.创建文件
3.1.引入样式
- Rest.css样式
body,div,h1,h2,h3,h4,h5,h6,li,ol,ul{
margin: 0px; padding: 0px;}
/* 整个文本默认居中 */
body{
text-align: center;font-size:14px;}
/* 所有的a标签都要去掉下划线 */
a{
text-decoration: none;}
li{
list-style: none;}
- jd.css样式
4.在标签中写代码
4.1.导航框整体
<!--导航开始-->
<div class="nav">
<!--导航结束-->
在jd.css中,加入样式
.nav{
/* 高度30 */
height: 30px;
/* 背景颜色 */
background-color: #F7F7F7;
}
4.1.1.导航框左边部分
jd.css
.warp{
/* 大概在宽度1000 左右*/
width: 1000px;
margin: 0px auto;
}
.nav_ul1 {
float: left;
}
.nav_ul1 li{
float: left;
/* 行高 */
line-height: 30px;
}
但是字体颜色不对
.nav_ul1 a{
font-size:12px ;
color: #666;
}
4.1.1.导航框右边部分
京东.html
```python
<ul class="nav_ul2">
<li><a href="">wakcdfzfofgx 退出</a><span>|</span></li>
<li><a href="">我的订单</a><span>|</span></li>
<li><a href="">手机京东</a><span>|</span></li>
<li><a href="">客户服务</a><span>|</span></li>
<li><a href=