小兔子乖乖把门开
小兔鲜
2
新鲜好物
新鲜出炉 品质靠谱 查看全部
-
睿米无线吸尘器F8
￥899 新
品 -
睿米无线吸尘器F8
￥899 新
品 -
睿米无线吸尘器F8
￥899
-
睿米无线吸尘器F8
￥899
生鲜
- 价格亲民
- 物流快捷
- 品质新鲜
关于我们| 帮助中心| 售后服务| 配送与验收| 商务合作| 搜索推荐| 友情链接
CopyRight @ 小兔鲜儿
代码部分
清除样式代码
/清除默认样式的代码/
/*去除常见标签默认的margin和padding */
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; }
/内减模式/
- { box-sizing: border-box; }
/去除列表默认样式/
ul, ol { list-style: none; }
/设置网页统一的字体大小、行高、字体系列相关属性/
body { font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; }
/去除默认的倾斜效果/
em, i { font-style: normal; }
/去除a标签默认下划线，并设置默认文字颜色/
a { text-decoration: none; color: #333; }
/设置img的垂直对齐方式为居中对齐，去除img默认下间隙/
img { vertical-align: middle; }
/去除input默认样式/
input { border: none; outline: none; color: #333; }
/左浮动/
.fl { float: left; }
/右浮动/
.fr { float: right; }
/双伪元素清除法/
.clearfix::before, .clearfix::after { Content: ""; display: table; }
.clearfix::after { clear: both; }
公共样式部分
body {
width: 1840px;
}
/* 版心 */
.wrapper { width: 1226px; margin: 0 auto; }
/* 公有的页头 */
.header { height: 45px; line-height: 45px; background-color: #333; }
.header ul, .header ol, .header .car { float: left; }
.header li { height: 45px; float: left; }
.header li a, .header ol a { padding: 0 10px; font-size: 12px; color: #b0b0b0; }
.header li span, .header ol span { color: #424242; }
.header ol { margin-left: 190px; }
/* 顶部导航栏购物车 */
.header .car { background-color: #424242; width: 120px; padding-left: 25px; height: 45px; }
.header .car a { display: inline-block; color: #b0b0b0; font-size: 12px; /* background-image: url(../05-素材/day00/1.png); */ }
.header li a:hover { color: white; }
/* 导航栏 */
.nav { height: 100px; line-height: 100px; }
/* logo部分 */
.nav .logo { float: left; width: 70px; height: 70px; }
.nav .logo img { width: 100%; }
/* 导航栏部分 */
.nav ul { float: left; margin-left: 180px; }
.nav ul li { float: left; font-size: 16px; padding-right: 20px; }
.nav ul li a:hover { color: orange; }
/* 搜索部分 */
.nav .search { float: right; }
.nav .search input { width: 295px; height: 45px; border: 1px solid #ccc; padding-left: 5px; }
/* 公有的页脚 */
.footer .top { height: 80px; line-height: 80px; border-bottom: 1px solid #ccc; }
/* 页脚的自定义列表 */
.footer .top li { width: 240px; height: 80px; float: left; text-align: center; }
.footer .top li a { font-size: 16px; margin-right: 70px; }
.footer .top li span { font-size: 16px; color: #ccc; }
.footer .bottom { padding: 40px 0; }
.footer .bottom .list { float: left; }
.footer .bottom .list dl { float: left; font-size: 14px; width: 160px; }
.footer .bottom .list dd { font-size: 12px; color: #757575; margin: 10px 0; }
/* 页脚的电话部分 */
.footer .bottom .iphone { float: left; width: 240px; height: 100px; border-left: 1px solid #ccc; text-align: center; }
.footer .bottom .iphone p { font-size: 12px; margin-bottom: 5px; }
.footer .bottom .iphone p:first-child { font-size: 22px; color: #ff6700; }
.footer .bottom .iphone p:nth-child(3) { width: 120px; height: 30px; border: 1px solid #ff6700; color: #ff6700; margin: 0 auto 5px; line-height: 30px; }
主页代码
/* 通用属性 */
- { padding: 0; margin: 0; box-sizing: border-box; }
a { text-decoration: none; color: black; }
li { list-style: none; }
body { font: 12px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; }
/* 版心 */
.box { width: 1226px; margin: 0 auto; }
/* 顶部导航栏 */
.nav { width: 1478px; }
.nav-top { width: 1478px; height: 40px; line-height: 40px; background-color: black; }
.nav-top a, .nav-top span { color: #b0b0b0; margin-left: 30px; }
.nav-top li { float: left; }
.nav-top-ul { width: 730px; float: left; }
.nav-top-li { width: 496px; float: left; }
.nav-top-li img { margin-left: 20px; }
.nav-bontom { width: 1478px; height: 100px; line-height: 100px; }
.nav-bontom-logo, .nav-bontom-ul { float: left; }
.nav-bontom-logo { width: 200px; height: 100px; }
.nav-bontom-logo img { width: 100%; }
.nav-bontom-ul li { float: left; margin-left: 40px; }
.aside-list { width: 1226px; height: 420px; }
.aside-list li { width: 234px; height: 42px; line-height: 42px; background-color: rgba(105, 101, 101, .6); padding-left: 30px; }
.aside-list li a { font-size: 14px; color: white; }
/* 网页中部广告 */
.msg { height: 57px; line-height: 57px; }
/* 底部页脚 */
.footer { width: 1478px; }
.footer-top { width: 1226px; height: 80px; border-bottom: 1px solid #616161; line-height: 80px; }
.footer-top li { height: 80px; }
.footer-bottom { width: 1226px; height: 250px; }
.footer-top a { font-size: 16px; }
.footer-top li { float: left; }
.footer-top span, .footer-top a { margin-left: 60px; }
.footer-bottom { width: 1226px; height: 150px; }
.footer-bottom-ol { width: 160px; float: left; }
.footer-bottom-ol dt { font-size: 14px; padding-top: 40px; }
.footer-bottom-ol dd { margin-top: 10px; }
.footer-bottom-iphone { width: 251px; border-left: 1px solid #e0e0e0; float: left; padding-top: 40px; text-align: center; }
.footer-iphone-p { font-size: 22px; color: #ff6700; }
/* .footer-bottom-iphone span { display: inline-block; } */
.footer-iphone-span { border: 1px solid #ff6700; display: inline-block; width: 120px; height: 30px; line-height: 30px; color: #ff6700; }
.footer-bottom-iphone p, .footer-bottom-iphone span { margin-bottom: 5px; }
