在学习了HTML和CSS以后,用俩天的时间仿写京东网站的部分界面,基本将之前学习的内容都应用到了,收货颇多,也对网站的布局有了更深的认识。
总结
- 整体的布局
在开始写网站之前,要考虑整体的布局,事先将每一块的内容框架搭建好,后期就可以将每一块的内容填充好,包括css的样式。这样思路就比较清晰,不至于后面越做越乱。
- 公共样式
针对一样的内容,可以设置相同的样式,在需要的时候可以直接引入,不需要重复敲css样式
- 命名,代码书写规范
命名要规范,提高代码的可读性。
- 图片
- 比如仿写淘宝,京东网站,我们可以去相应的矢量库找图标。
- 网上的图片可以下载下来,保存到同一个文件夹img中
- 雪碧图,事先把小图片切下来放在同一张页面,开发时就只需要把这张图片引入即可。然后再根据具体情况调整背景图片的位置,利用background-position这个属性可以设置。
京东网站的仿写
将整个网站按照功能分成多个部分进行总结
导航菜单的制作总结
- 首先要进行基本的样式清除: *{margin:0;padding:0}
- 用无序列表构建菜单,ul/li
- 定位问题,relation,absolute,static
- float:left;制作水平菜单
- 列表圆点去除:list-style:none
- 下划线去除:text-decoration:none
- 文本垂直居中,line-height:~px;(与height的值相同)
- 文本水平居中,text-align: center;
- 需要将行标签设置为块元素,才能设高宽,hover效果 ,display:block,通过伪类hover,可以为菜单增加交互效果
HTML
<div class="top_title">
<div class="title">
<ul class="title_left">
<li><i class="iconfont">󰊕</i><a href="#">北京</a></li>
</ul>
<ul class="title_right">
<li><a href="#">你好,请登录</a><a href="#" style="color: #dd0000;;">免费注册</a></li>
<li class="v_line">|</li>
<li><a href="#">我的订单</a></li>
<li class="v_line">|</li>
<li class="titlehover"><a href="#">我的京东</a><i class="iconfont ">󰊩</i></li>
<li class="v_line">|</li>
<li><a href="#">京东会员</a></li>
<li class="v_line">|</li>
<li class="titlehover"><a href="#">企业采购</a><i class="iconfont ">󰊩</i></li>
<li class="v_line">|</li>
<li class="titlehover"><a href="#">客户服务</a><i class="iconfont ">󰊩</i></li>
<li class="v_line">|</li>
<li class="titlehover"><a href="#">网站导航</a><i class="iconfont ">󰊩</i></li>
<li class="v_line">|</li>
<li><a href="#">手机京东</a></li>
</ul>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: #F0F3EF;
}
.top_title {
background-color: #E3E4E5;
}
.title {
width: 1190px;
height: 30px;
margin: 0 auto;
line-height: 30px;
}
.title_left {
margin-left: 200px;
float: left;
}
.title_left > li {
border-left: 1px solid #E3E4E5;
border-right: 1px solid #E3E4E5;
list-style: none;
font-size: 12px;
color: #a3a3a3;
padding: 0 7px;
}
.title_left > li > i {
color: red;
font-size: 12px;
margin-right: 5px;
}
.title_left > li > a {
color: #a3a3a3;
text-decoration: none;
}
.title_left > li:hover {
background-color: white;
border-left: 1px solid silver;
border-right: 1px solid silver;
}
.title_right {
float: right;
}
.title_right > li {
float: left;
margin-right: 0px;
list-style: none;
font-size: 12px;
color: #a3a3a3;
}
.title_right > li > a {
color: #a3a3a3;
margin: 0 7px;
text-decoration: none;
}
.title_right > li > i {
margin-right: 10px;
color: silver;
}
.titlehover {
border-left: 1px solid #E3E4E5;
border-right: 1px solid #E3E4E5;
margin-left: 7px;
margin-right: 7px;
}
.titlehover:hover {
background-color: white;
border-left: 1px solid silver;
border-right: 1px solid silver; /* 防止框框看起来变动*/
}
.title_right > li > a:hover {
color: #dd0000;
}
.v_line {
height: 10px;
}
商城分类导航的制作
有一篇博客就是写的这块内容,可以参考,总体的思路是一样的。
图片制作总结
添加图片使用img标签,首先要给图片一个父容器,然后设置父容器的样式,再将图片的样式设置成:
img{
width:100%;
height:100%;
}
矢量图标
要将矢量图标的文件放到css文件里,才可以直接引用。
先设置父容器的样式,再设置矢量图标的样式,可以加悬停。
HTML
<span class="camera">
<i class="iconfont ">󰂒</i>
</span>
CSS
.camera {
position: absolute;
width: 40px;
height: 35px;
right: 60px;
top: 2px;
line-height: 35px;
text-align: center;
}
.camera > i {
font-size: 25px;
color: #808080;
}
.camera > i:hover {
color: red;
}
图片阴影
box-shadow:5px 5px 25px silver;
水平阴影的位置,垂直阴影的位置,阴影的大小,阴影的颜色(学css3的时候在具体介绍)
圆点制作总结
主要用到border-radius属性,向元素添加圆角边框
border-radius:50%; 圆形
HTML
<div class="rank_dian">
<span class="spancolor"></span>
<span></span>
</div>
CSS
.rank_dian {
text-align: center;
}
.rank_dian > span {
display: inline-block;
border-radius: 50%;
width: 8px;
height: 8px;
border: 2px solid silver;
}
.spancolor {
background-color: #f52728;
border: 2px solid #f52728 !important; /*优先级*/
box-shadow: 0px 0px 10px #ff4d2d;
}