- 1
- 2
- 3
- 4
- 5
基于HTML+CSS编写京东的静态主页（代码+笔记）
源码资源链接：
https://download.csdn.net/download/cindy647/10535906
步骤：
1.截图，要一个效果图
2.搭建项目环境，结构样式行为分离
3.引入图片和图标，存储
4.划分结构布局
笔记：
模拟鼠标
cursor:pointer; 鼠标变成小手
cursor:move; 鼠标变成四角箭头
cursor:text; 鼠标变成工形插入条光标
cursor:default; 鼠标变成小白
圆角矩形
border-radius: 宽/高一半；
border-radius:50%；
border-radius: 0.3em；
border-radius: 3px3px 8px 4px;
左上角 右上角 右下角 左下
层级
简单概述：谁高。
使用：
一、必须有定位。（除去static）
二、用z-index来控制层级数。
层级问题 （谁高）
总结：标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。
定位高于浮动，浮动高于标准流。（高低和占不占位置无关）
（除去static之外）。
用法：1、必须有定位。（除去static之外）。
2、给定z-index的值为层级的值。（不给默认为0）
（层级为0的盒子，也比标准流和浮动高。）
（层级为负数的盒子，比标准流和浮动低。）
（层级不取小数）
（层级一样，后面的盒子比前面的层级高。）
（浮动或者标准流的盒子，后面的盒子比前面的层级高。）
定位中：abso lute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的。
什么时候用margin和padding（不考虑宽高）
1.需要使用背景图的时候必须用padding。
2.会出现外边距合并或者margin塌陷的时候用padding。
3.行内元素上下只能设置padding，不能设置margin。（行内高16px）
4.看border，如果是a连接，看能不能让字体变色，或者显示小手。
5.看需求。
隐藏盒子问题
1.overflow：hidden; 隐藏盒子超出的部分。
2.display: none; 隐藏盒子，而且不占位置。(用的最多)
3.visibility: hidden; 隐藏盒子，而且占位置。
4.opacity: 0; 隐藏盒子，而且占位置。
Position/top/left/...-999px隐藏盒子，而且占位置
半透明
opacity：0.4； 优点方便。缺点：里面的内容也会半透明。
C3的技术来解决半透明：
background: rgba(0,0,0,0.3);
background: rgba(0,0,0, .3);
代码：（很长，自留笔记而已，可以略过）
HTML部分：
京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！
少时诵诗书所所所所所所所所
拉海底捞副本附件花费文件那个
css部分-base
@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
margin: 0;
padding: 0;
}
fieldset, img, input, button { /*fieldset组合表单中的相关元素*/
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
ul, ol {
list-style: none; /*清除列表风格*/
}
input {
padding-top: 0;
padding-bottom: 0;
font-family: "SimSun", "宋体";
}
select, input {
vertical-align: middle;
}
select, input, textarea {
font-size: 12px;
margin: 0;
}
textarea {
resize: none;
}
/*防止多行文本框拖动*/
img {
border: 0;
vertical-align: middle;
}
/* 去掉图片低测默认的3像素空白缝隙*/
table {
border-collapse: collapse; /*合并外边线*/
}
body {
font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*宋体，Unicode，统一码*/
color: #666;
background: #fff
}
.clearfix:before, .clearfix:after {
content: "";
display: table
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #C81623;
}
h1, h2, h3, h4, h5, h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
s, i, em {
font-style: normal;
text-decoration: none;
}
.col-red {
color: #C81623 !important;
}
/*公共类*/
.w {
/*版心 提取 */
width: 1210px;
margin: 0 auto;
}
.fl {
float: left
}
.fr {
float: right
}
.al {
text-align: left
}
.ac {
text-align: center
}
.ar {
text-align: right
}
.hide {
display: none
}
/*nav开始*/
.site-nav {
height: 30px;
background: #f0f0f0;
line-height: 30px;
}
.site-nav .fore {
position: relative;
padding: 0 25px 0 10px;
}
.site-nav-send {
position:relative;
padding:0 25px 0 10px;
width: 60px;
height: 30px;
}
.site-nav i{
position: absolute;
width: 15px;
height: 7px;
top: 12px;
right: 8px;
overflow: hidden;
}
.site-nav-send s,.site-nav-r .fore s{
position: absolute;
top: -15px;
}
/*var right*/
.site-nav li{
float: left;
padding: 0 10px;
}
.site-nav li.shu{
width: 1px;
height: 15px;
background: #ddd;
padding: 0px;
margin-top: 9px;
}
.jd-tel {
position: relative;
}
.site-nav .jd-tel {
padding-left:25px;
}
.site-nav .fore span {
position: absolute;
top: 5px;
left: 7px;
width: 15px;
height: 20px;
background: url("../images/tel.png") no-repeat;
}
/*nav结束*/
/*top-banner开始*/
.topbanner {
background-color: #37C2FB;
}
.tb {
position:relative;
}
.close-banner {
position:absolute;
top: 5px;
right: 5px;
width: 19px;
height: 19px;
background: url("../images/close-banner.png") no-repeat;
}
.close-banner:hover {
background-position:0 -19px;
}
/*top-banner部分结束*/
/*search部分开始*/
.search-logo {
float:left;
width: 362px;
height: 60px;
padding: 20px 0;
}
.search-input {
float: left;
width: 538px;
height: 61px;
}
.search-car {
float:right;
width: 96px;
height: 34px;
margin:25px 65px 0 0;
border: 1px solid #dfdfdf;
background-color: #f9f9f9;
line-height: 34px;
padding-left: 43px;
position: relative;
}
.icon1 {
position: absolute;
width: 18px;
height: 16px;
background: url("../images/tel.png") no-repeat 0 -58px;
top: 8px;
left: 18px;
}
.icon2 {
position: absolute;
right: 10px;
top: 0;
color: #999;
font:13px/34px "SimSun";
}
.icon3 {
position: absolute;
top:-5px;
width: 16px;
height: 14px;
background-color: #C81623;
line-height: 14px;
text-align: center;
color: #ffffff;
border-radius:7px 0 7px 0;
}
.search-morealink {
float: left;
width: 538px;
height: 28px;
}
.search-logo a {
display: inline-block;
width: 270px;
height: 60px;
text-indent:-5000px;
background: url("../images/logo.png") no-repeat;
}
.search-input {
float: left;
height: 36px;
padding: 25px 0 0 0;
}
.search-input input {
float: left;
width: 450px;
height: 32px;
border: 2px solid #b61d1d;
padding-left: 4px;
font: 400 14px/32px "microsoft yahei";
color:rgb(153,153,153);
border-right: 0;
}
.search-input button {
height: 36px;
width: 82px;
color: #ffffff;
font:400 16px/36px "微软雅黑";
background-color : #B61D1D;
cursor: pointer;
}
.search-morealink li {
float: left;
margin-top: 4px;
}
.search-morealink li a{
display: inline-block;
margin: 0 6px;
color: #000;
}
.search-morealink li a:hover {
color: #C81623;
}
/*search部分结束*/
/**/
.shortcut-nav {
height: 44px;
width: 100%;
border-bottom: 2px solid #B61D1D;
}
.shortcut-nav-menu {
width: 210px;
height: 44px;
float: left;
}
.shortcut-nav-items {
width: 730px;
height: 44px;
float: left;
}
.shortcut-nav-img {
width: 200px;
height: 44px;
float: right;
}
.shortcut-nav-img img {
height: 39px;
padding-bottom: 5px;
}
.shortcut-nav-menu-all a {
display: inline-block;
width: 210px;
height: 44px;
background-color: #b1191a;
font:400 18px/44px "microsoft yahei";
color: #ffffff;
text-align: center;
}
.shortcut-nav-menu-one {
width: 210px;
height: 466px;
margin-top: 2px;
background-color: #C81623;
border-left: 1px solid #b1191a;
border-bottom: 1px solid #b1191a;
position: absolute;
z-index: 5;
}
.shortcut-nav-items li{
float: left;
}
.shortcut-nav-items a {
display: inline-block;
height: 44px;
padding: 0 20px;
color:#333;
font: 400 15px/44px "microsolt yahei";
}
.shortcut-nav-items a:hover {
color:#c81623;
}
.shortcut-nav-menu-one div {
height: 31px;
padding: 0 10px;
color:#fff;
font:400 14px/31px "microsoft yahei";
}
.shortcut-nav-menu-one h3 {
float: left;
}
.shortcut-nav-menu-one a {
color: #ffffff;
}
.shortcut-nav-menu-one div:hover{
background-color: #ffffff;
}
.shortcut-nav-menu-one div:hover a {
color:#c81623;
}
.shortcut-nav-menu-one i {
float: right;
color: #ffffff;
font: 400 12px/31px "console";
}
/**/
/*footer部分开始*/
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix {
*zoom: 1; /*IE/7/6*/
}
.footer-top-slogen {
width: 100%;
height: 94px;
position: relative;
background-color: #f5f5f5;
}
.footer-top-slogen-icon {
position: absolute;
left:50%;
top:20px;
}
.footer-top-slogen-icon1 {
margin-left: -604px;
}
.footer-top-slogen-icon2 {
margin-left: -302px;
}
.footer-top-slogen-icon4 {
margin-left: 302px;
}
.footer-top-shopping dl{
padding-top: 16px;
float: left;
width: 200px;
}
.footer-top-shopping dt,.coverage h3{
height: 34px;
font:18px/34px "microsoft yahei";
}
.footer-top-shopping dd {
line-height: 20px;
}
.footer-top-shopping .last-dl {
width: 100px;
}
.footer-top .coverage {
float: right;
width: 186px;
height: 169px;
margin-top: 16px;
background: url("../images/china.png") no-repeat 0 -131px;
padding:0 50px 0 20px;
}
.footer-top .coverage a {
float: right;
}
.footer-top .coverage p {
padding-top: 8px;;
}
.footer-bottom {
border-top:1px solid #E5E5E5;
text-align: center;
}
.footer-bottom-links {
padding-top: 20px;
padding-bottom: 10px;
font:12px/18px "microsoft yahei";
}
.footer-bottom-links a {
margin:0 5px;
font:12px/18px "microsoft yahei";
}
.footer-bottom-img a {
margin-right: 5px;
}
css部分-global
/*主体部分开始*/
/*主体-中心图开始*/
.main-slider{
margin:12px 0 0 220px;
width: 735px;
height: 454px;
position: relative;
}
.main-slider img {
width: 735px;
height: 454px;
}
.main-slider ul {
float: left;
width: 300px;
height: 30px;
position: absolute;
left: 50%;
margin-left:-150px;
top:90%;
z-index: 10;
}
.main-slider li {
float: left;
width: 18px;
height: 18px;
border-radius:50%;
color: #ffffff;
background-color: #333333;
margin:5px 20px;
text-align: center ;
}
.main-slider li:hover {
background-color:#999;
}
.main-slider i {
position: absolute;
top:50%;
margin-top: -25px;
width: 30px;
height: 50px;
text-align: center;
font:400 30px/50px "microsoft yahei";
color:rgba(255,255,255,0.1);
background-color: rgba(153,153,153,0.6);
}
.main-slider i:hover {
background-color: rgba(153,153,153,0.9);
color:rgba(255,255,255,0.6);
}
.main-slider .i-left {
float: left;
left: 5px;
}
.main-slider .i-right {
float: right;
right: 5px;
}
/*sub banner 部分开始 */
.sub-banner {
position: relative;
}
.sub-banner a{
position: absolute;
float: left;
width: 100%;
height: 644px;
background: url("../images/subbanner.jpg") no-repeat center top;
}
/*sub banner 部分结束*/
/*主体-中心图结束*/
/*主体-新闻部分开始*/
.main{
position: relative;
z-index: 6;
}
.main-news {
margin-top: 12px;
width: 247px;
height: 454px;
border: 1px solid #999999;
}
.main-news-top {
height: 152px;
}
.main-news-top dt,.main-news-top dd{
padding:0 10px;
}
.main-news-top dt{
height: 31px;
border-bottom: 1px solid #999999;
}
.main-news-top i {
width: 90px;
font:400 16px/31px "microsoft yahei";
float: left;
}
.main-news .main-news-top a{
display: inline-block;
font:400 12px/31px "microsoft yahei";
float: right;
width: 50px;
height: 31px;
}
.main-news-top dd {
padding: 5px 0 0 0;
}
.main-news a {
display: inline-block;
width: 247px;
height: 75px;
}
.main-news-cen div{
float: left;
width: 61px;
height: 70px;
border-right: 1px solid #999999;
border-top: 1px solid #999999;
border-bottom: 1px solid #999999;
text-align:center;
}
.main-news-cen div.div-last {
border-right: hidden;
}
.main-news-cen div a{
text-align:center;
width: 50px;
height: 20px;
}
.main-news-cen div .fig {
width: 25px;
height: 24px;
overflow: hidden;
border:none;
margin: 13px 19px 10px 18px;
}
.main-news-cen div .img1{
position: relative;
width: 50px;
top: 0;
left: 0;
}
.main-news-cen div .img2{
position: relative;
width: 50px;
top:-25px;
left: 0;
}
.main-news img {
width: 247px;
}
/*新闻部分结束*/
/*图标部分开始*/
.today {
margin:10px auto 20px ;
position: relative;
}
.today-left {
float: left;
margin-right: 1px;
}
.today-left a {
display: inline-block;
width: 210px;
height: 151px;
background:url("../images/pic1.jpg") ;
}
.today-right {
float: right;
position: relative;
}
.today-right li {
float: left;
margin-right: 1px;
}
.today-right li img {
width: 248px;
}
.today-right i {
position: absolute;
top:50%;
margin-top: -25px;
width: 30px;
height: 50px;
text-align: center;
font:400 30px/50px "microsoft yahei";
color:rgba(255,255,255,0.1);
background-color: rgba(153,153,153,0.6);
}
.today-right i:hover {
background-color: rgba(153,153,153,0.9);
color:rgba(255,255,255,0.6);
}
.today-right .i-left {
float: left;
left: 5px;
}
.today-right .i-right {
float: right;
right: 5px;
}