HTML5+CSS3项目实战之河马牙医首页、百度首页、Mac桌面、简书首页、登录注册页面、苏宁易购首页
时间:2022-07-26
本文章向大家介绍HTML5+CSS3项目实战之河马牙医首页、百度首页、Mac桌面、简书首页、登录注册页面、苏宁易购首页，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
河马牙医首页
## 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="images/hmlogo.jpg" alt="">
</div>
<!--头部右边-->
<div class="header-center-right">
<a href="http://www.itlike.com" target="_blank">
<img src="images/home_icon.png" alt="">
<span>首页</span>
</a>
<a href="#">
<img src="images/about_icon.png" alt="">
<span>关于我们</span>
</a>
<a href="#">
<img src="images/contact_icon.png" alt="">
<span>联系我们</span>
</a>
</div>
</div>
</header>
<!--中间内容-->
<article>
<section>
<img src="images/home1.png" alt="">
</section>
<section>
<img src="images/home2.png" alt="">
</section>
<section>
<img src="images/home3.png" alt="">
</section>
<section>
<img src="images/home4.png" alt="">
</section>
<section>
<img src="images/home5.png" alt="">
</section>
<section>
<img src="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="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="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="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="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="images/cell_img1.png" alt="">
<img src="images/cell_img2.png" alt="">
<img src="images/cell_img3.png" alt="">
<p>网易新闻 09-20 13:19</p>
</div>
<!--2-->
<div class="list-content-cell2">
<div class="cell-img">
<img src="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="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="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="images/file.png" alt="" style="">
<p>撩课资料</p>
</div>
<div class="file">
<img src="images/file.png" alt="">
<p>撩课视频</p>
</div>
<div class="file">
<img src="images/file.png" alt="">
<p>撩课资源</p>
</div>
</section>
<!--尾部-->
<footer id="footer">
<div class="dock">
<ul>
<li><a href="#"><img src="images/zurb-icon.png"></a></li>
<li><a href="#"><img src="images/linkedin-icon.png"></a> </li>
<li><a href="#"><img src="images/notable-icon.png"></a> </li>
<li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
<li><a href="#"><img src="images/facebook-icon.png"></a> </li>
<li><a href="#"><img src="images/google-icon.png"></a> </li>
<li><a href="#"><img src="images/notable-icon.png"></a> </li>
<li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
<li><a href="#"><img src="images/facebook-icon.png"></a> </li>
<li><a href="#"><img src="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="images/js_logo.png" alt="">
</a>
</div>
<!--导航列表-->
<div class="nav-content-c">
<ul>
<li><a href=""><img src="images/find_icon.png" alt="">发现</a></li>
<li><a href=""><img src="images/book_icon.png" alt="">关注</a></li>
<li><a href=""><img src="images/ld_icon.png" alt="">消息</a></li>
<li class="search-input">
<input type="text" value="搜索">
<img class="search-icon" src="images/fd_icon.png" alt="">
</li>
</ul>
</div>
<!--导航头像-->
<div class="nav-content-r">
<img class="jsa-btn" src="images/jsa_icon.png" alt="">
<img class="head-btn" src="images/touxiang_img.png" alt="">
<a href="#" class="write-btn">
<img src="images/write_icon.png" alt="">
写文章
</a>
</div>
</div>
</nav>
<!--内容区域-->
<div id="main">
<!--内容区域左边-->
<div class="main-left">
<!--焦点图-->
<div class="main-left-top">
<img src="images/jdt.png" alt="">
</div>
<!--专题-->
<div class="main-left-center">
<a href="javascript:;"><img src="images/1.jpg" alt="">故事</a>
<a href="javascript:;"><img src="images/2.jpg" alt="">读书</a>
<a href="javascript:;"><img src="images/3.jpg" alt="">摄影</a>
<a href="javascript:;"><img src="images/4.jpg" alt="">互联网</a>
<a href="javascript:;"><img src="images/1.jpg" alt="">故事</a>
<a href="javascript:;"><img src="images/3.jpg" alt="">读书</a>
<a href="javascript:;"><img src="images/2.jpg" alt="">摄影</a>
<a href="javascript:;"><img src="images/4.jpg" alt="">互联网</a>
<a href="javascript:;">更多热门专题></a>
</div>
<!--文章列表-->
<div class="main-left-cell">
<div class="cell">
<dl>
<dt><img src="images/cell_img.jpg" alt=""></dt>
<dd>
<h3>排序图解：js排序算法实现</h3>
<p>@(汇总)[js] 基础 Javascript是一种弱类型语言， 它分别有什么优点和缺点 弱类型语言：简单好用，更灵活多变。 但是会牺牲性能，比如一...</p>
<a href=""><span>远方不会远</span></a>
<a href=""><img src="images/comment_icon.png" alt=""><span>0</span></a>
<a href=""><img src="images/like_icon.png" alt=""><span>10</span></a>
</dd>
</dl>
</div>
<div class="cell">
<dl>
<dt><img src="images/cell_img.jpg" alt=""></dt>
<dd>
<h3>排序图解：js排序算法实现</h3>
<p>@(汇总)[js] 基础 Javascript是一种弱类型语言， 它分别有什么优点和缺点 弱类型语言：简单好用，更灵活多变。 但是会牺牲性能，比如一...</p>
<a href=""><span>远方不会远</span></a>
<a href=""><img src="images/comment_icon.png" alt=""><span>0</span></a>
<a href=""><img src="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="images/jf01.png" alt=""></a>
<a href=""><img src="images/jf02.png" alt=""></a>
<a href=""><img src="images/jf03.png" alt=""></a>
<a href=""><img src="images/jf04.png" alt=""></a>
<a href=""><img src="images/jf05.png" alt=""></a>
</div>
<!--右侧二维码-->
<div class="main-right-center">
<dl>
<dt><img src="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="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="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="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="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="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="images/qq.png" alt=""></a>
<a href=""><img src="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="images/qq.png" alt=""></a>
<a href=""><img src="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的class
this.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="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="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="images/casual.jpg" alt=""></a></li>
</ul>
<ol>
<li></li>
</ol>
</div>
<!--手风琴效果-->
<div class="casual-bottom">
<img src="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="images/promise_1.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
<dl>
<dt><a href=""><img src="images/promise_2.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
<dl>
<dt><a href=""><img src="images/promise_3.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
<dl>
<dt><a href=""><img src="images/promise_4.jpg" alt="正品保障、提供发票"></a></dt>
<dd>
<p><strong>正品保障</strong></p>
<p>正品保障、提供发票</p>
</dd>
</dl>
<dl>
<dt><a href=""><img src="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="images/chengxin.png" alt=""></a>
<a href=""><img src="images/unicom.png" alt=""></a>
<a href=""><img src="images/dianxin.jpg" alt=""></a>
<a href=""><img src="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;
}
/***************************尾部-结束*************************/网页界面：
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 详解Android端与JavaWeb传输加密（DES+RSA）
- Android编程实现下载时主界面与详细界面一致更新的方法
- 详解Android Studio 3.0的新特性与适配
- Android开发实现Launcher3应用列表修改透明背景的方法
- Android开发中方向传感器定义与用法详解【附指南针实现方法】
- Android利用ViewDragHelper轻松实现拼图游戏的示例
- ListView实现聊天列表之处理不同数据项
- 运算符
- ViewPager实现带引导小圆点与自动跳转的引导界面
- Android开发中Launcher3常见默认配置修改方法总结
- Android辅助功能实现自动抢红包(附源码)
- Android设置控件阴影的三种方法
- Android Studio 引入 aidl 文件的方法汇总
- Android 点击生成二维码功能实现代码
- Android屏幕手势检测的实现代码