HTML5+CSS3项目实战之河马牙医首页、百度首页、Mac桌面、简书首页、登录注册页面、苏宁易购首页
2024-04-12 20:20:54
河马牙医首页
## index.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="keywords" content="牙疼怎么办，智齿是什么，拔牙多少钱，矫正多少钱，九院医生，北大口腔，瑞尔口腔，拜耳口腔"><meta name="description" content="有牙齿问题,找河马牙医,儿童口腔，全国儿童口腔在线咨询，牙疼怎么办，拔牙多少钱，矫正多少钱，种植牙，有牙齿问题"><meta name="renderer" content="webkit"/><title>河马牙医-口腔健康服务平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><style>body, section {margin: 0;}section img {width: 100%;vertical-align: top;}/*头部*/#header {height: 80px;/*background-color: yellow;*/}/*头部版心*/#header .header-center {width: 1260px;height: 80px;/*background-color: red;*//*水平居中*/margin: 0 auto;}/*头部的左边*/.header-center-left {float: left;/*background-color: purple;*/height: 56px;margin-top: 12px;}/*头部的右边*/.header-center-right {float: right;/*background-color: deepskyblue;*/width: 450px;height: 80px;line-height: 80px;}.header-center-right a {margin-right: 30px;/*去除下划线*/text-decoration: none;color: #409ad6;font-size: 18px;}.header-center-right a span {vertical-align: middle;}.header-center-right a img {vertical-align: middle;margin-right: 5px;}#footer {height: 30px;background-color: #346699;}#footer .footer-center {width: 1260px;height: 30px;line-height: 30px;/*background-color: red;*//*水平居中*/margin: 0 auto;}#footer .footer-center p{margin-top: 0;/*文字右对齐*/text-align: right;}#footer .footer-center p span{margin-right: 5px;font-size: 12px;color: white;}</style>
</head>
<body>
<!--头部-->
<header id="header"><div class="header-center"><!--头部左边--><div class="header-center-left"><img src="data:images/hmlogo.jpg" alt=""></div><!--头部右边--><div class="header-center-right"><a href="http://www.itlike.com" target="_blank"><img src="data:images/home_icon.png" alt=""><span>首页</span></a><a href="#"><img src="data:images/about_icon.png" alt=""><span>关于我们</span></a><a href="#"><img src="data:images/contact_icon.png" alt=""><span>联系我们</span></a></div></div>
</header>
<!--中间内容-->
<article><section><img src="data:images/home1.png" alt=""></section><section><img src="data:images/home2.png" alt=""></section><section><img src="data:images/home3.png" alt=""></section><section><img src="data:images/home4.png" alt=""></section><section><img src="data:images/home5.png" alt=""></section><section><img src="data:images/home6.png" alt=""></section>
</article>
<!--尾部-->
<footer id="footer"><div class="footer-center"><p><span>©2016</span><span>上海康牙网络科技有限公司</span><span>沪ICP备15009258号</span><span>客服热线: 400-040-0423</span></p></div>
</footer>
</body>
</html>
网页界面：
百度首页
## index.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>百度一下, 你就知道</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<header id="header"><!--左边--><div class="header-left"><span><img src="data:images/weather.png" alt="" align="center"></span><span class="msg-span"><span>|</span><a href="#">换肤</a><a href="#">消息</a></span></div><!--右边--><div class="header-right"><a href="">新闻</a><a href="">hao123</a><a href="">地图</a><a href="">学术</a><a href="http://www.itlike.com">撩课学院</a><a href="" class="more-product">更多产品</a></div>
</header>
<!--搜索-->
<section id="content"><!--logo--><div class="logo"><img src="data:images/bd_logo.png" alt="百度logo"></div><div class="search"><form action="http://www.itlike.com"><input name="content" type="text" class="search-input"><input name="btn" type="submit" class="search-submit" value="百度一下"></form></div><!--搜索-->
</section>
<!--列表-->
<section id="list"><!--头部--><div class="list-head"><!--左边--><div class="list-head-left"><a href=""><img src="data:images/person_icon.png" alt=""><span>我的关注</span></a><a href=""><span>推荐</span></a><a href=""><span>导航</span></a></div><!--右边--><div class="list-head-right"><a href="#"><img src="data:images/setting_icon.png" alt=""></a></div></div><!--内容--><div class="list-content"><!--内容的左边--><div class="list-content-left"><!--1--><div class="list-content-cell1"><h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3><img src="data:images/cell_img1.png" alt=""><img src="data:images/cell_img2.png" alt=""><img src="data:images/cell_img3.png" alt=""><p>网易新闻 09-20 13:19</p></div><!--2--><div class="list-content-cell2"><div class="cell-img"><img src="data:images/cell_img1.png" alt=""></div><div class="cell-title"><h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3><p>网易新闻 09-10 13:19</p></div></div><!--3--><div class="list-content-cell2"><div class="cell-img"><img src="data:images/cell_img2.png" alt=""></div><div class="cell-title"><h3>大满贯14冠！德约3-0完胜波特罗 美网三度封王</h3><p>网易新闻 09-10 13:19</p></div></div></div><!--内容的右边--><div class="list-content-right"><div class="right-top"><h4>实时热点</h4><div><img src="data:images/circle_icon.png" alt=""><span>换一换</span></div></div><div class="right-body"><ul><li>高晓松 丁香医生</li><li>中国参加俄军演</li><li>高晓松 丁香医生</li><li>中国参加俄军演</li><li>高晓松 丁香医生</li><li>中国参加俄军演</li><li>高晓松 丁香医生</li><li>中国参加俄军演</li><li>高晓松 丁香医生</li><li>中国参加俄军演</li><li>高晓松 丁香医生</li><li>中国参加俄军演</li></ul></div></div></div>
</section>
</body>
</html>
## index.css* {margin: 0;padding: 0;box-sizing: border-box;
}body {/*margin-bottom: 200px;*/
}/************************头部-start**********************/
#header {height: 33px;border-bottom: 1px solid #ebebeb;
}#header a {color: #555555;font-size: 13px;
}#header .header-left {width: 270px;height: 33px;float: left;line-height: 33px;
}#header .header-left a {margin-left: 8px;
}#header .header-right {width: 600px;height: 33px;float: right;text-align: right;line-height: 33px;
}#header .header-right a {font-weight: bolder;margin-left: 15px;
}#header .header-right a.more-product {background-color: #398bfb;/*行内 --> 行内-块级*/display: inline-block;width: 86px;height: 33px;line-height: 33px;text-align: center;color: #fff;text-decoration: none;vertical-align: top;
}/************************头部-end**********************//************************搜索-start**********************/
#content {width: 641px;height: 189px;margin: 20px auto;/*background-color: green;*/
}#content .logo {/*background-color: red;*/text-align: center;width: 641px;height: 112px;
}#content .logo img {width: 270px;height: 112px;
}#content .search {width: 100%;height: 77px;/*background-color: skyblue;*/padding-top: 10px;
}#content .search form {width: 100%;height: 44px;/*background-color: purple;*/
}#content .search form .search-input {width: 536px;height: 44px;padding-left: 8px;/*去除外边框*/outline: none;border: 1px solid #e0e0e0;float: left;
}#content .search form .search-input:focus {border-color: #398bfb;
}#content .search-submit {width: 105px;height: 44px;background-color: #398bfb;border: none;float: left;color: #fff;font-size: 16px;/*去除外边框*/outline: none;
}/************************搜索-end**********************//************************列表-start**********************/
#list {width: 893px;height: 600px;border: 1px solid #ebebeb;margin: 0 auto;
}#list .list-head {height: 40px;line-height: 40px;border-bottom: 1px solid #ebebeb;
}#list .list-head .list-head-left {float: left;/*解决空格留白的问题*/font-size: 0;
}#list .list-head .list-head-left a {display: inline-block;height: 40px;line-height: 40px;/*background-color: red;*/font-size: 14px;text-decoration: none;padding: 0 10px;color: #555555;vertical-align: top;
}#list .list-head .list-head-left a img,
#list .list-head .list-head-left a span {vertical-align: middle;
}#list .list-head .list-head-left a:hover {background-color: #cccccc;
}#list .list-head .list-head-right {float: right;margin-right: 10px;
}#list .list-head .list-head-right img {vertical-align: middle;
}/*列表内容*/
#list .list-content {}#list .list-content .list-content-left {width: 575px;height: 600px;/*background-color: red;*/float: left;padding: 10px 5px 5px 10px;
}#list .list-content .list-content-left .list-content-cell1 {border-bottom: 1px solid #e0e0e0;padding-bottom: 5px;
}#list .list-content .list-content-left .list-content-cell1 h3 {margin-bottom: 10px;
}#list .list-content .list-content-left .list-content-cell1 p {margin: 3px 0;color: #555555;font-size: 12px;
}#list .list-content .list-content-left .list-content-cell2 {padding: 20px 0;height: 160px;border-bottom: 1px solid #e0e0e0;
}#list .list-content .list-content-left .list-content-cell2 .cell-img {float: left;
}#list .list-content .list-content-left .list-content-cell2 .cell-title{float: left;width: 360px;padding: 20px;
}#list .list-content .list-content-left .list-content-cell2 h3 {margin-bottom: 10px;
}#list .list-content .list-content-left .list-content-cell2 p {margin: 3px 0;color: #555555;font-size: 12px;
}#list .list-content .list-content-right{width: 315px;height: 600px;/*background-color: red;*/float: left;
}#list .list-content .list-content-right .right-top{height: 60px;width: 315px;/*background-color: green;*/padding: 20px;
}#list .list-content .list-content-right .right-top h4{float: left;
}#list .list-content .list-content-right .right-top div{float: right;
}#list .list-content .list-content-right .right-top div img,
#list .list-content .list-content-right .right-top div span{vertical-align: middle;
}#list .list-content .list-content-right .right-body{/*background-color: red;*/padding: 0 20px;
}#list .list-content .list-content-right .right-body ul li{list-style: none;width: 130px;height: 40px;line-height: 40px;float: left;color: #666666;font-size: 14px;
}/************************列表-end**********************/
网页界面：
Mac桌面
## index.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>撩课-喜欢IT,就上撩课(itlike.com)</title><link rel="stylesheet" href="bootstrap/css/bootstrap.css"><link rel="stylesheet" href="css/index.css"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body><!--头部--><header id="header"><!--头部的左边--><ul class="header-left"><li><a href="" class="glyphicon glyphicon-apple"></a></li><li><a href="#">itlike.com</a></li><li><a href="#">文件</a></li><li><a href="#">编辑</a></li><li><a href="#">显示</a></li><li><a href="#">帮助</a></li></ul><!--头部的右边--><ul class="header-right"><li class="glyphicon glyphicon-volume-up"></li><li class="glyphicon glyphicon-align-left"></li><li class="glyphicon glyphicon-question-sign"></li><li class="glyphicon glyphicon-leaf"></li></ul></header><!--中间的内容--><section id="content"><div class="file"><img src="data:images/file.png" alt="" style=""><p>撩课资料</p></div><div class="file"><img src="data:images/file.png" alt=""><p>撩课视频</p></div><div class="file"><img src="data:images/file.png" alt=""><p>撩课资源</p></div></section><!--尾部--><footer id="footer"><div class="dock"><ul><li><a href="#"><img src="data:images/zurb-icon.png"></a></li><li><a href="#"><img src="data:images/linkedin-icon.png"></a> </li><li><a href="#"><img src="data:images/notable-icon.png"></a> </li><li><a href="#"><img src="data:images/lastfm-icon.png"></a> </li><li><a href="#"><img src="data:images/facebook-icon.png"></a> </li><li><a href="#"><img src="data:images/google-icon.png"></a> </li><li><a href="#"><img src="data:images/notable-icon.png"></a> </li><li><a href="#"><img src="data:images/lastfm-icon.png"></a> </li><li><a href="#"><img src="data:images/facebook-icon.png"></a> </li><li><a href="#"><img src="data:images/google-icon.png"></a> </li></ul></div></footer>
</body>
</html>
## index.css*{margin: 0;padding: 0;list-style: none;border: none;}body{background: url("../images/desktop.png") no-repeat fixed;background-size: cover;
}a{text-decoration: none !important;color: #000;
}/*头部*/
#header{background-color: rgba(255, 255, 255, .6);width: 100%;height: 36px;line-height: 36px;/*box-shadow: 5px 5px 10px red;*//*固定定位*/position: fixed;left: 0;top: 0;cursor: pointer;z-index: 999;font-size: 18px;
}#header .header-left li{float: left;margin-left: 15px;
}#header .header-right li{float: right;margin-right: 15px;
}/*内容*/
#content{position: relative;
}#content .file{width: 100px;text-align: center;color: #fff;position: absolute;cursor: pointer;
}#content .file img{width: 100%;}#content .file:nth-child(1){left: 50px;top: 80px;
}#content .file:nth-child(2){left: 50px;top: 220px;
}#content .file:nth-child(3){left: 50px;top: 360px;
}/*尾部*/
#footer{height: 60px;line-height: 60px;width: 100%;/*background-color: red;*//*定位*/position: fixed;left: 0;bottom: 0;text-align: center;
}#footer .dock{background: url("../images/dock_bg.png");width: 60%;height: 100%;/*块级标签居中*/margin: 0 auto;border-top-right-radius: 5px;border-top-left-radius: 5px;
}#footer .dock ul{display: inline-block;
}#footer .dock ul li{float: left;margin: 0 13px;/*设置动画的过渡效果*/transition: all 0.25s linear;
}#footer .dock ul li img{width: 50px;
}/*动画*/
#footer .dock ul li:hover{/*设置动画的方向*/transform-origin: bottom center;/*放大1.5倍*/transform: scale(1.5);
}
网页界面：
简书首页
## index.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。"><meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读"><title>简书 - 创作你的创作</title><link rel="stylesheet" href="css/index.css"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body><!--头部导航--><nav id="nav"><div class="nav-content"><!--导航文字--><div class="nav-content-l"><a href="#"><img src="data:images/js_logo.png" alt=""></a></div><!--导航列表--><div class="nav-content-c"><ul><li><a href=""><img src="data:images/find_icon.png" alt="">发现</a></li><li><a href=""><img src="data:images/book_icon.png" alt="">关注</a></li><li><a href=""><img src="data:images/ld_icon.png" alt="">消息</a></li><li class="search-input"><input type="text" value="搜索"><img class="search-icon" src="data:images/fd_icon.png" alt=""></li></ul></div><!--导航头像--><div class="nav-content-r"><img class="jsa-btn" src="data:images/jsa_icon.png" alt=""><img class="head-btn" src="data:images/touxiang_img.png" alt=""><a href="#" class="write-btn"><img src="data:images/write_icon.png" alt="">写文章</a></div></div></nav><!--内容区域--><div id="main"><!--内容区域左边--><div class="main-left"><!--焦点图--><div class="main-left-top"><img src="data:images/jdt.png" alt=""></div><!--专题--><div class="main-left-center"><a href="javascript:;"><img src="data:images/1.jpg" alt="">故事</a><a href="javascript:;"><img src="data:images/2.jpg" alt="">读书</a><a href="javascript:;"><img src="data:images/3.jpg" alt="">摄影</a><a href="javascript:;"><img src="data:images/4.jpg" alt="">互联网</a><a href="javascript:;"><img src="data:images/1.jpg" alt="">故事</a><a href="javascript:;"><img src="data:images/3.jpg" alt="">读书</a><a href="javascript:;"><img src="data:images/2.jpg" alt="">摄影</a><a href="javascript:;"><img src="data:images/4.jpg" alt="">互联网</a><a href="javascript:;">更多热门专题></a></div><!--文章列表--><div class="main-left-cell"><div class="cell"><dl><dt><img src="data:images/cell_img.jpg" alt=""></dt><dd><h3>排序图解：js排序算法实现</h3><p>@(汇总)[js] 基础 Javascript是一种弱类型语言， 它分别有什么优点和缺点 弱类型语言：简单好用，更灵活多变。 但是会牺牲性能，比如一...</p><a href=""><span>远方不会远</span></a><a href=""><img src="data:images/comment_icon.png" alt=""><span>0</span></a><a href=""><img src="data:images/like_icon.png" alt=""><span>10</span></a></dd></dl></div><div class="cell"><dl><dt><img src="data:images/cell_img.jpg" alt=""></dt><dd><h3>排序图解：js排序算法实现</h3><p>@(汇总)[js] 基础 Javascript是一种弱类型语言， 它分别有什么优点和缺点 弱类型语言：简单好用，更灵活多变。 但是会牺牲性能，比如一...</p><a href=""><span>远方不会远</span></a><a href=""><img src="data:images/comment_icon.png" alt=""><span>0</span></a><a href=""><img src="data:images/like_icon.png" alt=""><span>10</span></a></dd></dl></div></div></div><!--内容区域右边--><div class="main-right"><!--右侧图片--><div class="main-right-top"><a href=""><img src="data:images/jf01.png" alt=""></a><a href=""><img src="data:images/jf02.png" alt=""></a><a href=""><img src="data:images/jf03.png" alt=""></a><a href=""><img src="data:images/jf04.png" alt=""></a><a href=""><img src="data:images/jf05.png" alt=""></a></div><!--右侧二维码--><div class="main-right-center"><dl><dt><img src="data:images/itlike.png" alt=""></dt><dd><p>下载简书手机App></p><p>随时随地发现和创作内容</p></dd></dl></div><!--推荐作者--><div class="main-right-bottom"><div class="main-right-bottom-head"><span>推荐作者</span><span><a href="">换一批</a></span></div><ul><li><a href="#"><img src="data:images/author1.webp"></a><div><a href="#">王老师八卦美术史</a><p>写了132.4k字 · 788喜欢</p><a href="#" class="fouce">+关注</a></div></li><li><a href="#"><img src="data:images/author2.webp"></a><div><a href="#">红瑀</a><p>写了320.6k字 · 10.6k喜欢</p><a href="#" class="fouce">+关注</a></div></li><li><a href="#"><img src="data:images/author3.webp"></a><div><a href="#">须僧</a><p>写了241.4k字 · 3.5k喜欢</p><a href="#" class="fouce">+关注</a></div></li><li><a href="#"><img src="data:images/author4.webp"></a><div><a href="#">一只支</a><p>写了635.4k字 · 1.6k喜欢</p><a href="#" class="fouce">+关注</a></div></li><li><a href="#"><img src="data:images/author3.webp"></a><div><a href="#">须僧</a><p>写了241.4k字 · 3.5k喜欢</p><a href="#" class="fouce">+关注</a></div></li></ul><a href="" class="get-all">查看全部></a></div></div></div>
</body>
</html>
## index.css/*****************************通用样式********************************/
* {margin: 0;padding: 0;box-sizing: border-box;
}ul {list-style: none;
}a {text-decoration: none;color: #666666;
}img {vertical-align: middle;
}body {/*height: 6000px;*//*background-color: red;*/
}/*******************************通用样式******************************//*******************************头部导航******************************/
#nav {width: 100%;height: 56px;border-bottom: 1px solid #efefef;position: fixed;left: 0;top: 0;background-color: white;/* box-shadow: 0 5px 5px #efefef;*/z-index: 999;
}/*左边*/
#nav .nav-content {width: 1440px;height: 56px;/*background-color: red;*/margin: 0 auto;
}#nav .nav-content .nav-content-l {float: left;
}#nav .nav-content .nav-content-l img {width: 100px;height: 56px;
}/*中间列表*/
#nav .nav-content .nav-content-c {width: 700px;height: 56px;/*background-color: red;*/float: left;margin-left: 120px;
}#nav .nav-content .nav-content-c ul li {display: inline-block;height: 56px;line-height: 56px;font-size: 17px;
}#nav .nav-content .nav-content-c ul li a {/*background-color: red;*/display: inline-block;height: 56px;padding: 0 15px;
}#nav .nav-content .nav-content-c ul li a:hover {background-color: #cccccc;
}#nav .nav-content .nav-content-c ul li img {width: 23px;margin-right: 3px;
}#nav .nav-content .nav-content-c .search-input {/*background-color: red;*/width: 255px;height: 56px;position: relative;
}#nav .nav-content .nav-content-c .search-input input {width: 255px;height: 38px;border: none;background-color: #eeeeee;border-radius: 19px;padding-left: 10px;color: #666666;
}#nav .nav-content .nav-content-c .search-input input:focus {outline: none;
}#nav .nav-content .nav-content-c .search-input .search-icon {position: absolute;right: 10px;top: 17px;
}/*右边*/
#nav .nav-content .nav-content-r {width: 300px;height: 56px;line-height: 56px;float: right;
}#nav .nav-content .nav-content-r .jsa-btn {margin-right: 10px;
}#nav .nav-content .nav-content-r .head-btn {width: 40px;border-radius: 50%;border: 1px solid #666666;margin: 0 10px;
}#nav .nav-content .nav-content-r .write-btn {background-color: #ea6f5a;display: inline-block;width: 100px;height: 40px;line-height: 40px;border-radius: 20px;color: #fff;
}#nav .nav-content .nav-content-r .write-btn img {margin-left: 8px;
}/*******************************头部导航******************************//*******************************内容导航******************************/
#main {width: 1000px;height: 2000px;/*background-color: red;*/margin: 70px auto;
}#main .main-left {width: 688px;height: 800px;/*background-color: green;*/float: left;
}#main .main-left .main-left-top {width: 100%;height: 270px;
}#main .main-left .main-left-top img {width: 688px;height: 270px;border-radius: 10px;
}/*中间*/
#main .main-left .main-left-center {width: 100%;height: 104px;/*background-color: red;*/margin-top: 20px;
}#main .main-left .main-left-center > a {/*background-color: red;*/display: inline-block;border: 1px solid #dcdcdc;border-radius: 5px;margin: 0 18px 18px 0;padding-right: 15px;background-color: #f7f7f7;
}#main .main-left .main-left-center > a:last-child {border: none;/*设置透明色*/background-color: transparent;font-size: 16px;color: #787878;line-height: 32px;
}#main .main-left .main-left-center > a img {width: 30px;height: 30px;vertical-align: middle;margin-right: 15px;border-radius: 5px 0 0 5px;
}/*列表*/
#main .main-left .main-left-cell {width: 100%;height: 500px;/*background-color: red;*/
}#main .main-left .main-left-cell .cell {border-top: 1px solid #f0f0f0;height: 125px;padding: 10px 0;
}#main .main-left .main-left-cell .cell dt {width: 20%;height: 100px;float: right;
}#main .main-left .main-left-cell .cell dt img {width: 100%;border-radius: 5px;
}#main .main-left .main-left-cell .cell dd{width: 80%;float: left;
}#main .main-left .main-left-cell .cell dd p{font-size: 14px;margin: 5px 0;color: #666666;line-height: 25px;
}#main .main-left .main-left-cell .cell dd a{margin-right: 10px;font-size: 12px;color: #b4b4b4;
}#main .main-left .main-left-cell .cell dd a img{vertical-align: middle;
}#main .main-left .main-left-cell .cell dd a span{vertical-align: middle;
}#main .main-right {width: 300px;height: 800px;float: right;/*background-color: deepskyblue;*/
}#main .main-right .main-right-top{width: 300px;height: 270px;/*background-color: red;*/
}#main .main-right .main-right-top img{width: 100%;height: 50px;margin-bottom: 5px;
}#main .main-right .main-right-center{width: 100%;height: 92px;margin-top: 10px;border: 1px solid #f0f0f0;border-radius: 6px;padding: 15px 25px;
}#main .main-right .main-right-center dt{float: left;
}#main .main-right .main-right-center dt img{width: 60px;margin-right: 10px;
}#main .main-right .main-right-center dd{margin-top: 5px;float: left;
}#main .main-right .main-right-center dd p{margin-top: 3px;font-size: 16px;
}#main .main-right .main-right-center dd p:last-child{color: #b8b8b8;font-size: 14px;margin-top: 5px;
}#main .main-right .main-right-bottom{width: 100%;height: 300px;margin-top: 10px;
}#main .main-right .main-right-bottom .main-right-bottom-head{height: 45px;line-height: 45px;/*background-color: red;*/padding: 0 10px;font-size: 14px;margin-bottom: 10px;
}#main .main-right .main-right-bottom .main-right-bottom-head span:first-child{float: left;color: #b8b8b8;
}#main .main-right .main-right-bottom .main-right-bottom-head span:last-child{float: right;
}#main .main-right .main-right-bottom .main-right-bottom-head span:last-child a{color: #b8b8b8;
}#main .main-right .main-right-bottom ul li{width: 100%;height: 50px;margin-bottom: 10px;position: relative;
}#main .main-right .main-right-bottom ul li img{width: 48px;border-radius: 50%;border: 1px solid #cccccc;margin-right: 10px;
}#main .main-right .main-right-bottom ul li>a{float: left;
}#main .main-right .main-right-bottom ul li>div{/*background-color: red;*/width: 220px;height: 50px;float: left;
}#main .main-right .main-right-bottom ul li>div p{margin: 5px 0;font-size: 12px;color: #666666;
}#main .main-right .main-right-bottom ul li>div .fouce{position: absolute;right: 0;top: 0;
}#main .main-right .main-right-bottom .get-all{display: inline-block;width: 300px;background-color: #f7f7f7;border: 1px solid #cccccc;border-radius: 5px;text-align: center;padding: 7px;
}/*列表*//*******************************内容导航******************************/
网页界面：
登录注册页面
## index.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>撩课-喜欢IT,就上撩课(itlike.com)</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="content"><!--头部--><div class="content-header clearfix"><a href="javascript:;" class="current">我要登录</a><a href="javascript:;">我要注册</a></div><!--内容--><div class="content-body"><!--登录--><div class="dom" style="display: block;"><form action=""><div class="s1"><h4>账号</h4><input name="user" type="text" placeholder="用户名/手机/邮箱"></div><div class="s1"><h4>密码</h4><input name="psd" type="password" placeholder="请输入密码"></div><div class="s2"><input type="checkbox"><span>记住密码</span></div><input type="button" class="btn" value="登录"></form><div class="dom-footer"><div class="login-another"><a href="">找回密码</a><span>| </span><span>还没有注册帐号?</span><a href="">立即注册</a></div><div class="login-three"><span>使用第三方账号直接登录</span><div class="login-icon"><a href=""><img src="data:images/qq.png" alt=""></a><a href=""><img src="data:images/wechat.png" alt=""></a></div></div></div></div><!--注册--><div class="dom"><form action=""><div class="s1"><h4>手机号码</h4><input name="phone" type="text" placeholder="填写你的手机号码作为登录账户"></div><div class="s1"><h4>用户名</h4><input name="user" type="text" placeholder="中、英文均可, 最长20个字符或10个汉字"></div><div class="s1"><h4>密码</h4><input name="pwd" type="password" placeholder="6-30位英文、数字、符号, 区分大小写"></div><div class="s1 msg-code"><h4>短信验证码</h4><input name="code" type="text" placeholder="填写短信验证码"><button>获取验证码</button></div><div class="s1"><h4>邀请码 <span style="color: purple">(选填)</span></h4><input name="pwd" type="password" placeholder="如果有邀请码, 请填写"></div><input type="button" class="btn" value="注册"></form><div class="dom-footer"><div class="login-three"><span>使用第三方账号直接登录</span><div class="login-icon"><a href=""><img src="data:images/qq.png" alt=""></a><a href=""><img src="data:images/wechat.png" alt=""></a></div></div></div></div></div>
</div><script>window.onload = function () {// 1.1 获取需要的标签let as = document.getElementsByClassName('content-header')[0].getElementsByTagName('a');let contents = document.getElementsByClassName('dom');// 1.2 遍历for (let i = 0; i < as.length; i++) {// 1.2.1 取出单个对象let a = as[i];a.id = i;// 1.2.2 监听鼠标的移动事件a.onclick = function () {// 让所有的a的class都清除for (let j = 0; j < as.length; j++) {as[j].className = '';contents[j].style.display = 'none';}// 设置当前a的classthis.className = 'current';// 从contents数组中取出对应的标签contents[this.id].style.display = 'block';}}};
</script>
</body>
</html>
## index.css/*默认的样式*/
html, body, a, img, li, ul, p, span, div, h4, input {margin: 0;padding: 0;text-decoration: none;list-style: none;box-sizing: border-box;
}.clearfix:before,
.clearfix:after {content: '';display: table;clear: both;
}input:focus, .btn:focus, button:focus {outline: none;
}/*默认的样式*//**********************************主要内容******************************/
#content {width: 500px;/*height: 600px;*//*background-color: red;*/border: 1px solid #e0e0e0;margin: 50px auto;
}/**********************************主要内容-头部******************************/
#content .content-header a {width: 50%;height: 60px;/*垂直居中*/line-height: 60px;background-color: #f5f5f5;/*水平居中*/text-align: center;color: #616161;
}/*选中的样式*/
#content .content-header a.current {background-color: #fff;font-weight: bolder;color: purple;
}#content .content-header a:first-child {float: left;
}#content .content-header a:last-child {float: right;
}/**********************************主要内容-身体******************************/
#content .content-body {padding: 50px;
}#content .content-body .dom {width: 100%;/*height: 540px;*//*background-color: red;*//*隐藏标签*/display: none;
}#content .content-body .dom .s1 {/*background-color: red;*/margin-bottom: 20px;
}#content .content-body .dom .s1 h4 {color: #666666;
}#content .content-body .dom .s1 input {width: 100%;height: 40px;margin-top: 5px;border-radius: 5px;padding-left: 10px;border: 1px solid #cccccc;
}#content .content-body .dom .s2 {/*background-color: red;*/margin-bottom: 20px;
}#content .content-body .btn {width: 100%;height: 40px;border: none;background-color: purple;font-size: 18px;color: #fff;margin-bottom: 20px;
}#content .dom-footer .login-another {/*background-color: red;*/color: #666666;margin-bottom: 20px;
}#content .dom-footer .login-another span {margin: 0 5px;
}#content .dom-footer .login-three {/*background-color: red;*/text-align: center;color: #666666;
}#content .dom-footer .login-three > span {position: relative;
}#content .dom-footer .login-three > span:before,
#content .dom-footer .login-three > span:after {content: '';display: inline-block;width: 100px;height: 1px;border-bottom: 1px solid #666666;position: absolute;top: 50%;
}#content .dom-footer .login-three > span:before {left: -111px;
}#content .dom-footer .login-three > span:after {right: -111px;
}#content .dom-footer .login-three .login-icon {margin-top: 20px;
}#content .dom-footer .login-three .login-icon img {width: 50px;
}#content .content-body .dom .msg-code input {width: 50%;margin-right: 10px;
}#content .content-body .dom .msg-code button {height: 40px;width: 40%;border: 1px solid #cccccc;background: #eeeeee;font-size: 16px;
}
网页界面：
苏宁易购首页
## index.html<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>current-苏宁易购(itlike.com)-送货更准时、价格更超值、上新货更快</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><meta name="keywords" content="苏宁易购网上商城,苏宁电器,Suning,手机,电脑,冰箱,洗衣机,相机,数码,家居用品,鞋帽,化妆品,母婴用品,图书,食品,正品行货"/><meta name="description" content="苏宁易购-综合网上购物平台，商品涵盖家电、手机、电脑、超市、母婴、服装、百货、海外购等品类。送货更准时、价格更超值、上新货更快，正品行货、全国联保、可门店自提，全网更低价，让您放心去喜欢！" /><link rel="stylesheet" href="source/style.css"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css">
</head>
<body><!--top-banner-开始--><div class="sn-top-banner"><!--版心--><div class="top-banner-center w"><a href="javascript:"><img src="data:images/top-banner.jpg" alt=""></a><a href="javascript:" class="close-banner"></a></div></div><!--top-banner-结束--><!--toolbar-开始--><div class="sn-toolbar"><!--版心--><div class="w"><!--左边--><div class="fl"><ul><li class="down"><a href="#">网站导航 </a><i><s>◇</s></i></li><li class="down"><a href="#">商家入驻 </a><i><s>◇</s></i></li><li class="down"><a href="#">客户服务 </a><i><s>◇</s></i></li><li class="address"><i class="address-icon"></i><a href="#">上海 </a><i><s>▼</s></i></li></ul></div><!--右边--><div class="fr"><ul><li><a href="#" style="margin-right: 10px">请登录</a><a href="#" class="f60">注册有礼</a></li><li class="down"><a href="#">我的订单</a><i><s>◇</s></i></li><li class="down"><a href="#">我的易购</a><i><s>◇</s></i></li><li><a href="#">苏宁会员</a></li><li class="down"><img class="cart" src="data:images/cart.png" alt=""><a href="#" class="f60">购物车</a><i><s>◇</s></i></li><li><a href="#">企业采购</a></li><li class="down"><a href="#">手机苏宁</a><i><s>◇</s></i></li></ul></div></div></div><!--toolbar-结束--><!--搜索-开始--><div class="sn-top-search"><div class="w"><!--左边--><div class="logo-set"><a href="#" class="main-logo"></a><a href="#" class="sub-logo"></a></div><!--搜索框--><div class="search-input"><input name="search" title="search" type="text" placeholder="周年庆赢好礼"><button>搜索</button></div><!--更多链接--><div class="search-more-link"><ul><li><a href="#">烤箱</a></li><li><a href="#" class="f60">老板林内CP趴</a></li><li><a href="#">iPhone XS</a></li><li><a href="#" class="f60">空气感拉拉裤</a></li><li><a href="#" class="f60">空调立减500</a></li><li><a href="#">浪琴</a></li><li><a href="#">手机</a></li><li><a href="#">冰箱</a></li></ul></div></div></div><!--搜索-结束--><!--nav-开始--><div class="sn-nav clearfix"><div class="w"><!--菜单--><div class="sn-nav-menu"><div class="sn-nav-menu-all"><a href="#">全部商品分类</a></div><div class="sn-nav-menu-one"><ul class="index-list"><li class=""><i class="sn-1"></i><a target="_blank">手机</a><em>/</em><a target="_blank">运营商</a><em>/</em><a target="_blank">智能数码</a></li><li class=""><i class="sn-2"></i><a target="_blank">电视</a><em>/</em><a target="_blank">冰箱</a><em>/</em><a target="_blank">空调</a><em>/</em><a target="_blank">洗衣机</a></li><li class=""><i class="sn-3"></i><a target="_blank">厨卫大电</a><em>/</em><a target="_blank">生活家电</a><em>/</em><a target="_blank">厨具</a></li><li class=""><i class="sn-4"></i><a target="_blank">电脑办公</a><em>/</em><a target="_blank">相机</a><em>/</em><a target="_blank">DIY</a></li><li class=""><i class="sn-5"></i><a target="_blank">家居</a><em>/</em><a target="_blank">家具</a><em>/</em><a target="_blank">家装</a><em>/</em><a target="_blank">家纺</a></li><li><i class="sn-6"></i><a target="_blank">食品</a><em>/</em><a target="_blank">酒水</a><em>/</em><a target="_blank">生鲜</a><em>/</em><a target="_blank">特产</a></li><li><i class="sn-7"></i><a target="_blank">个护化妆</a><em>/</em><a target="_blank">纸品清洁</a><em>/</em><a target="_blank">宠物</a></li><li class=""><i class="sn-8"></i><a target="_blank">母婴</a><em>/</em><a target="_blank">玩具</a><em>/</em><a target="_blank">车床</a><em>/</em><a target="_blank">童装</a></li><li><i class="sn-9"></i><a target="_blank">运动</a><em>/</em><a target="_blank">户外</a><em>/</em><a target="_blank">足球</a><em>/</em><a target="_blank">跑步机</a></li><li class=""><i class="sn-10"></i><a target="_blank">男装</a><em>/</em><a target="_blank">女装</a><em>/</em><a target="_blank">内衣</a></li><li><i class="sn-11"></i><a target="_blank">鞋靴</a><em>/</em><a target="_blank">箱包</a><em>/</em><a target="_blank">钟表</a><em>/</em><a target="_blank">珠宝</a></li><li class=""><i class="sn-12"></i><a target="_blank">汽摩</a><em>/</em><a target="_blank">二手车</a><em>/</em><a target="_blank">汽车用品</a></li><li class=""><i class="sn-13"></i><a target="_blank">图书</a><em>/</em><a target="_blank">童书</a><em>/</em><a target="_blank">教辅教材</a></li><li><i class="sn-fun"></i><a target="_blank">理财</a><em>/</em><a target="_blank">分期</a><em>/</em><a target="_blank">保险</a><em>/</em><a target="_blank">房产</a></li></ul></div></div><!--items--><div class="sn-nav-item"><ul><li><a href="#">大聚惠</a></li><li><a href="#">红孩子</a></li><li><a href="#">苏宁超市</a></li><li><a href="#">电器城</a></li><li><a href="#">生活家电</a></li><li><a href="#">时尚服饰</a></li><li><a href="#">苏宁国际</a></li><li><a href="#">苏宁Outlets</a></li><li><a href="#">苏宁金融</a></li></ul></div></div></div><!--nav-结束--><!--主要内容-第一块--><div class="sn-first-screen"><div class="w" style="position: relative"><!--中间的轮播图--><div class="sn-casual"><div><ul><li><a href=""><img src="data:images/casual.jpg" alt=""></a></li></ul><ol><li></li></ol></div><!--手风琴效果--><div class="casual-bottom"><img src="data:images/casual_bottom.jpg" alt=""></div></div><!--右边--><div class="sn-first-right"><!--第一部分--><div class="user-info"><div class="user-img"><a href="#"></a></div><p class="info">Hi,你好</p><div class="btn"><a href="#" class="register">新人有礼</a><a href="#" class="superhy"></a></div><div class="enter"><a href=""><em></em><span>领云钻</span><i>></i></a><a href=""><em></em><span>领券</span><i>></i></a></div></div><!--第二部分--><div class="toutiao"><ul><li><p><a href=""><i>[活动]</i>苏宁红孩子&新丝路少儿型秀大赛</a></p></li><li><p><a href=""><i>[知识]</i>别让孩子这样睡觉，可能比同龄人矮</a></p></li></ul></div><!--第三部分--><div class="kuaijie"><ul><li><a href="#"><i class="sn-4"></i><p>话费</p></a></li><li><a href="#"><i class="sn-4"></i><p>水电煤</p></a></li><li><a href="#"><i class="sn-4"></i><p>苏宁卡</p></a></li><li><a href="#"><i class="sn-4"></i><p>理财</p></a></li><li><a href="#"><i class="sn-4"></i><p>分期</p></a></li><li><a href="#"><i class="sn-4"></i><p>苏宁公益</p></a></li></ul></div></div></div></div><!--主要内容-第一块--><!--主要内容-第二块--><div class="sn-two-screen"><div class="w"><!--头部--><div class="two-top"><a href=""><img src="//image3.suning.cn/uimg/cms/img/153803915505375184.png" alt=""></a></div><!--内容--><div class="two-content"><div class="content"><ul><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt="" width="500px"></a></li><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li></ul></div><div class="content"><ul><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li><li><a href=""><img src="//image1.suning.cn/uimg/cms/img/153803884623961791.png" alt=""></a></li></ul></div></div></div></div><!--主要内容-第二块--><!--尾部--><div class="sn-footer"><div class="footer-top w"><div class="footer-top-promise clearfix"><dl><dt><a href=""><img src="data:images/promise_1.jpg" alt="正品保障、提供发票"></a></dt><dd><p><strong>正品保障</strong></p><p>正品保障、提供发票</p></dd></dl><dl><dt><a href=""><img src="data:images/promise_2.jpg" alt="正品保障、提供发票"></a></dt><dd><p><strong>正品保障</strong></p><p>正品保障、提供发票</p></dd></dl><dl><dt><a href=""><img src="data:images/promise_3.jpg" alt="正品保障、提供发票"></a></dt><dd><p><strong>正品保障</strong></p><p>正品保障、提供发票</p></dd></dl><dl><dt><a href=""><img src="data:images/promise_4.jpg" alt="正品保障、提供发票"></a></dt><dd><p><strong>正品保障</strong></p><p>正品保障、提供发票</p></dd></dl><dl><dt><a href=""><img src="data:images/promise_5.jpg" alt="正品保障、提供发票"></a></dt><dd><p><strong>正品保障</strong></p><p>正品保障、提供发票</p></dd></dl></div><div class="footer-top-shopping clearfix"><div class="w"><dl><dt>购物指南</dt><dd><a href="">导购演示</a></dd><dd><a href="">免费注册</a></dd><dd><a href="">会员等级</a></dd><dd><a href="">常见问题</a></dd><dd><a href="">品牌大全</a></dd></dl><dl><dt>导购演示</dt><dd>免费注册</dd><dd>会员等级</dd><dd>常见问题</dd><dd>品牌大全</dd><dd>支付方式</dd></dl><dl><dt>购物指南</dt><dd><a href="">导购演示</a></dd><dd><a href="">免费注册</a></dd><dd><a href="">会员等级</a></dd><dd><a href="">常见问题</a></dd><dd><a href="">品牌大全</a></dd></dl><dl><dt>导购演示</dt><dd>免费注册</dd><dd>会员等级</dd><dd>常见问题</dd><dd>品牌大全</dd><dd>支付方式</dd></dl><dl><dt>购物指南</dt><dd><a href="">导购演示</a></dd><dd><a href="">免费注册</a></dd><dd><a href="">会员等级</a></dd><dd><a href="">常见问题</a></dd><dd><a href="">品牌大全</a></dd></dl><div class="app-down"><p>身边苏宁</p><a href="#">全国300多个城市，上万个门店和服务终端期待您的光临，为您提供最贴心的服务！</a></div></div></div></div><div class="footer-bottom"><p class="url-list-links"><a href="#">苏宁互联</a>|<a href="#">苏宁金融</a>|<a href="#">苏宁支付</a>|<a href="#">PP视频</a>|<a href="#">红孩子</a>|<a href="#">苏宁物流</a>|<a href="#">手机苏宁</a>|<a href="#">零售云</a>|<a href="#">知识产权举报</a>|<a href="#">投资者关系</a></p><p class="url-list-links"><a href="#">联系我们</a>|<a href="#">诚聘英才</a>|<a href="#">供应商入驻</a>|<a href="#">广告平台</a>|<a href="#">苏宁联盟</a>|<a href="#">苏宁招标</a>|<a href="#">友情链接</a>|<a href="#">法律申明</a>|<a href="#">用户体验提升计划</a>|<a href="#">股东会员认证</a></p><div class="footer-bottom-copyright">Copyright© 2002-2018，苏宁易购集团股份有限公司版权所有 | 苏公网安备 32010202010078号 | 苏ICP备10207551号-4 | 苏B1-20130131<br>苏B2-20130376 | 苏B2-20130391 | 出版物经营许可证新出发苏批字第A-243号 | 互联网药品信息服务资格证书（苏）-非经营性-2016-0005<br>本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</div><div class="footer-bottom-img"><a href=""><img src="data:images/chengxin.png" alt=""></a><a href=""><img src="data:images/unicom.png" alt=""></a><a href=""><img src="data:images/dianxin.jpg" alt=""></a><a href=""><img src="data:images/dianzi.png" alt=""></a></div></div></div><!--尾部-->
</body>
</html>
## base.css@charset "UTF-8";/*初始化*/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, a, img, button {margin: 0;padding: 0;
}ul, ol {list-style: none;
}form, fieldset, legend, input {border: none;outline: none;
}a {color: #666;text-decoration: none;
}a:hover {color: #F60;
}body, button, input, select, textarea {/*font-size: 12px;line-height: 150%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/font: 12px/1.5 "Microsoft Yahei", tahoma, arial, "Hiragino Sans GB";
}.clearfix:before,
.clearfix:after{content: '';display: table;clear: both;
}
/*隐藏*/
.hide{display: none;
}.f60{color: #FF6600;
}/*版心*/
.w{width: 1190px;margin: 0 auto;
}.fl{float: left;
}.fr{float: right;
}.tl{text-align: left;
}.tc{text-align: center;
}.tr{text-align: right;
}s, i, em{font-style: normal;text-decoration: none;
}
## index.css/***************************top-banner-开始*************************/
.sn-top-banner {background-color: #164fa6;height: 100px;position: relative;
}.sn-top-banner .close-banner {position: absolute;top: 3px;right: 56px;width: 15px;height: 15px;background: url("../images/index.png") -241px -145px;
}.sn-top-banner .close-banner:hover {background-position: -256px -145px;
}/***************************top-banner-结束*************************//***************************toolbar-开始*************************/
.sn-toolbar {height: 35px;line-height: 35px;background-color: #f5f5f5;border-bottom: 1px solid #eee;
}.sn-toolbar li {float: left;padding: 0 15px;
}.sn-toolbar .down {position: relative;/*background-color: red;*/padding: 0 25px 0 10px;
}.sn-toolbar .down i {width: 14px;height: 6px;/*background-color: green;*/position: absolute;top: 16px;right: 11px;overflow: hidden;}.sn-toolbar .down i s {position: absolute;font-size: 20px;top: -19px;color: #666;
}.sn-toolbar .address {position: relative;
}.sn-toolbar .address .address-icon {position: absolute;left: 0;top: 7px;width: 20px;height: 20px;background: url("../images/index.png") -387px -181px;
}.sn-toolbar .address s {color: #bbbbbb;
}.sn-toolbar .cart {width: 15px;position: absolute;left: -8px;top: 7px;
}/***************************toolbar-结束*************************//***************************搜索-开始*************************/
.sn-top-search {height: 110px;/*background-color: blue;*/
}.sn-top-search .logo-set {width: 400px;height: 110px;/*background-color: red;*/float: left;
}.sn-top-search .logo-set .main-logo {width: 190px;height: 90px;background: url("../images/sn-logo.png") no-repeat center;}.sn-top-search .logo-set .sub-logo {width: 160px;height: 100px;margin-top: 5px;background: url("../images/sn-sub-logo.gif") no-repeat center;
}.sn-top-search .logo-set .main-logo, .sn-top-search .logo-set .sub-logo {-webkit-background-size: contain;background-size: contain;float: left;
}.sn-top-search .search-input {float: left;width: 538px;height: 36px;/*background-color: red;*/padding-top: 30px;
}.sn-top-search .search-input input {padding-left: 5px;float: left;color: #cccccc;width: 449px;height: 32px;border: 2px solid #F80;border-right: 0;
}.sn-top-search .search-input button {border: none;float: left;height: 36px;width: 82px;background-color: #F80;color: #fff;font: 400 18px/36px "microsoft yahei";cursor: pointer;
}.sn-top-search .search-more-link {float: left;width: 520px;height: 30px;/*background-color: green;*/
}.sn-top-search .search-more-link li {float: left;margin: 7px 10px 7px 0;border-left: 1px solid #c0c0c0;padding-left: 5px;
}.sn-top-search .search-more-link li:first-child {border: none;
}/*.sn-top-search .search-more-link li + li{}*//***************************搜索-结束*************************//***************************导航-开始*************************/
.sn-nav {width: 100%;height: 38px;/*background-color: red;*/
}.sn-nav .sn-nav-menu {width: 210px;height: 38px;float: left;z-index: 1;/*background-color: green;*/
}.sn-nav .sn-nav-menu .sn-nav-menu-all a {display: block;width: 190px;height: 38px;background-color: #f90;color: white;font: 600 14px/38px "microsoft yahei";padding-left: 30px;box-sizing: border-box;position: relative;
}.sn-nav .sn-nav-menu .sn-nav-menu-all a:before {content: '';display: block;width: 12px;height: 12px;background: url("../images/index.png") 0 0;position: absolute;left: 11px;top: 14px;
}.sn-nav-menu .sn-nav-menu-one {width: 190px;height: 440px;background-color: #252221;
}.sn-nav .sn-nav-item li {float: left;
}.sn-nav .sn-nav-item li a {display: inline-block;height: 38px;padding: 0 12px;font: 600 16px/38px "microsoft yahei";color: #333333;
}.sn-nav .sn-nav-item li a:hover {color: #f60;
}.sn-nav .sn-nav-menu-one .index-list li {height: 31px;padding: 0 10px 0 8px;font: 400 13px/31px "microsoft yahei";color: #666;
}.sn-nav .sn-nav-menu-one .index-list li a {color: #fff;
}/***************************导航-结束*************************//***************************轮播图-开始*************************/
.sn-first-screen {width: 100%;height: 440px;background-color: purple;/*position: relative;*/
}.sn-first-screen .sn-casual {margin-left: 190px;width: 830px;height: 440px;position: relative;
}.sn-first-screen .sn-casual .casual-bottom {position: absolute;left: 0;bottom: 10px;text-align: center;
}.sn-first-screen .sn-casual .casual-bottom img {width: 96%;
}.sn-first-screen .sn-first-right {width: 170px;height: 435px;background-color: #fff;position: absolute;left: 1020px;top: 5px;
}.sn-first-screen .sn-first-right .user-info {position: relative;width: 170px;height: 155px;padding: 11px 0 2px;border-bottom: 1px solid #f2f2f2;
}.sn-first-screen .sn-first-right .user-info .user-img {text-align: center;
}.sn-first-screen .sn-first-right .user-info .user-img a {display: inline-block;width: 58px;height: 58px;/*background-color: green;*/background: url("../images/index.png ") -91px -23px;
}.sn-first-screen .sn-first-right .user-info .info {text-align: center;margin-bottom: 10px;
}.sn-first-screen .sn-first-right .user-info .btn {display: flex;justify-content: space-around;
}.sn-first-screen .sn-first-right .user-info .btn a.register {display: inline-block;width: 68px;height: 20px;border: 1px solid #F90;color: #ffa114;line-height: 20px;text-align: center;
}.sn-first-screen .sn-first-right .user-info .btn a.superhy {display: inline-block;width: 70px;height: 22px;background: url("../images/index.png") -295px -251px;
}.sn-first-screen .sn-first-right .user-info .enter {/*background-color: red;*/text-align: center;margin: 10px 0;
}.sn-first-screen .sn-first-right .user-info .enter a {margin: 0 5px;
}.sn-first-screen .sn-first-right .user-info .enter a em {display: inline-block;width: 16px;height: 14px;vertical-align: middle;margin-right: 5px;
}.sn-first-screen .sn-first-right .user-info .enter a:first-child em {background: url("../images/index.png") -111px 0;
}.sn-first-screen .sn-first-right .user-info .enter a:last-child em {background: url("../images/index.png") -88px 0;
}/*头条*/
.sn-first-screen .sn-first-right .toutiao {width: 150px;height: 97px;margin: 11px 10px 12px;/*background-color: red;*/line-height: 20px;
}.sn-first-screen .sn-first-right .toutiao li {height: 48px;
}.sn-first-screen .sn-first-right .toutiao li i {color: #f90;margin-right: 5px;
}/*快捷*/
.sn-first-screen .sn-first-right .kuaijie {width: 170px;height: 145px;overflow: hidden;border-top: 1px solid #f2f2f2;
}.sn-first-screen .sn-first-right .kuaijie ul li {float: left;width: 55px;height: 72px;border-width: 0 1px 1px 0;border-style: solid;border-color: #f2f2f2;display: flex;justify-content: center;align-items: center;text-align: center;}.sn-first-screen .sn-first-right .kuaijie ul li:nth-child(3), .sn-first-screen .sn-first-right .kuaijie ul li:nth-child(6) {border-right: 0;
}.sn-first-screen .sn-first-right .kuaijie ul li i {font-size: 40px;
}/***************************轮播图-结束*************************//***************************主要内容-第二块-开始*************************/
.sn-two-screen {background-color: #f2f2f2;padding-bottom: 20px;
}.sn-two-screen .two-top img {width: 100%;vertical-align: top;
}.sn-two-screen .two-content .content {background-color: #f90;padding-bottom: 10px;
}.sn-two-screen .two-content .content ul{display: flex;justify-content: space-between;
}.sn-two-screen .two-content .content ul li img{max-width: 230px !important;max-height: 190px !important;
}/***************************主要内容-第二块-结束*************************//***************************尾部-结束*************************/
.sn-footer{background: #f5f5f5;border-top: 1px solid #e7e7e7;padding: 20px 0;
}.sn-footer .footer-top .footer-top-promise{width: 100%;/*background-color: red;*/
}.sn-footer .footer-top .footer-top-promise dl{float: left;width: 20%;/*background-color: green;*/
}.sn-footer .footer-top .footer-top-promise dl dt{float: left;margin-right: 8px;width: 48px;height: 48px;
}.sn-footer .footer-top .footer-top-promise dl dd p{line-height: 24px;
}.sn-footer .footer-top .footer-top-shopping{padding: 10px 0;
}.sn-footer .footer-top .footer-top-shopping dl{float: left;width: 200px;
}.sn-footer .footer-top .footer-top-shopping dl dt{font: 600 14px/40px "microsoft yahei";color: #545454;
}.sn-footer .footer-top .footer-top-shopping dl dd{height: 20px;
}.sn-footer .footer-top .footer-top-shopping .app-down{/*background-color: red;*/width: 90px;height: 180px;float: left;
}.sn-footer .footer-top .footer-top-shopping .app-down p{height: 40px;font: 600 14px/40px "microsoft yahei";color: #545454;
}.sn-footer .footer-bottom{background-color: #fff;text-align: center;padding: 30px 0;
}.sn-footer .footer-bottom .url-list-links{line-height: 25px;height: 25px;
}.sn-footer .footer-bottom .url-list-links a{margin: 0 8px;
}.sn-footer .footer-bottom .footer-bottom-copyright{padding: 10px 0;line-height: 25px;
}.footer-bottom-img a{margin: 0 5px;
}/***************************尾部-结束*************************/
网页界面：
HTML5+CSS3项目实战之河马牙医首页、百度首页、Mac桌面、简书首页、登录注册页面、苏宁易购首页相关推荐
- 从零玩转HTML5+CSS3项目实战-跟着李南江学编程
从零玩转HTML5+CSS3项目实战-跟着李南江学编程 1.CSS高级应用 1.边框圆角的基本使用 1.1什么是边框圆角:将直角的边框变为圆角的边框 1.2边框圆角的格式:border-radius: ...
- 视频教程-HTML5+CSS3项目实战详解-HTML5/CSS
HTML5+CSS3项目实战详解 13年软件开发经验,设计开发30多个大型软件,涉及政府.银行.电信.能源等大型软件项目. 精通J2EE体系架构,熟练使用Struts.Spring.hibernate ...
- 459~486（rem+媒体查询+Less+苏宁易购移动端首页）
1 rem基础 rem单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-si ...
- Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录 基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
- jsf登录注册页面_您将在下一个项目中使用JSF吗？
jsf登录注册页面 上周有一篇很棒的stackoverflow博客文章,主题是" Javascript框架的残酷生命周期" . 这篇文章是关于Javascript UI框架(ang ...
- 分布式爬虫系统设计、实现与实战：爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储...
http://blog.51cto.com/xpleaf/2093952 1 概述 在不用爬虫框架的情况,经过多方学习,尝试实现了一个分布式爬虫系统,并且可以将数据保存到不同地方,类似MySQL.HB ...
- 清爽登录界面html,基于css3实现扁平简洁清爽的登录注册页面代码
今天给大家分享一款基于css3实现扁平简洁清爽的登录注册页面代码,使用浅色设计,兼容移动设备,加入了基本的表单验证,适合大部分网站. 代码很简单有css样式,index.html两部分代码.感兴趣的朋 ...
- JavaWeb项目(登录注册页面)全过程详细总结
文章目录 JavaWeb项目(登录注册页面)全过程总结 一.环境准备与开发工具 二.创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录 ...
- 分布式爬虫系统设计、实现与实战：爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储
1 概述 在不用爬虫框架的情况,经过多方学习,尝试实现了一个分布式爬虫系统,并且可以将数据保存到不同地方,类似MySQL.HBase等. 基于面向接口的编码思想来开发,因此这个系统具有一定的扩展性,有 ...
- HTML5期末大作业：仿苏宁易购商城网站设计——仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业
HTML5期末大作业:仿苏宁易购商城网站设计--仿苏宁易购官网商城(1页) HTML+CSS+JavaScript web网页大作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...
最新文章
- 语言古诗默写_小学生背诵默写古诗文是否合理且必要？专家热议教育“减负”...
- ios添加设备真机测试，以及Undefined symbols for architecture x86_64:''错误
- mysql聚簇索引 和主键的区别_[MySQL] innoDB引擎的主键与聚簇索引
- python语义分析_Python差异的潜在语义分析
- 电脑微信扫一扫在哪_13个微信隐藏技巧，至少有10个你不知道
- Intouch/ifix语音报警系统制作(4-自动发送邮件提醒)
- 分享最新36款高质量免费英文字体
- linux 内核 内存管理 bootmem alloctor 申请内存
- html 显示不可见字符,真实用！ 一键清除不可见字符
- STM32F0xx系列 基于LL库的Flash模拟EEPROM
- round在oracle里怎么用,Oracle round 函数（图）
- 第十一篇，看门狗定时器编程
- 关于影响力章节的读后感：第二章
- 鸿蒙系统手机电脑互传文件,【手机篇】巧借局域网，便捷实现手机电脑间的文件传输...
- PWM控制的基本原理
- 为什么低代码治好了CIO们的 “精神内耗” ？
- java-asc码形式输出
- 【IT情感】久坐易死,IT人员您知道吗
- python进阶学习--PyCharm使用
- 《Python编程：从入门到实践》读书笔记——第6章：字典
热门文章
- Android实战开发-Kotlin教程（组件篇 2.2）
- 【业务安全01】业务安全基础及测试流程
- 服务器上找不到iis,Web服务器打开IIS7管理器看不到站点解决方法
- CPU .......TensorFlow binary was not compiled to use: AVX AVX2
- 值得收藏！深度报告解读NB-IoT
- 游戏BOSS关卡的设计
- Sketch一站式设计开发工具 Dapollo插件 for mac v2.0.9破解版
- obj 格式3D模型转 gltf 格式
- 蓝桥杯省赛C++A组B组题解整理（第十、九、八、七、六、五、四、三届）
- acwing1282. 搜索关键词（AC 自动机）