头部 start
我们以京东首页为模板,使用webstorm做一个网页。
项目文件夹
我们的网页都应该放到一个文件夹内,即为本地站点。
在webstorm中打开→文件→京东网页→确定→当前窗口
建一个Html文件,起名:index
一、 规划页面
项目文件夹
1.首页 index.html
2.样式 css文件夹(Base.css或者global.css)
3.图片 images文件
4.特效 js文件夹
在京东网页文件夹下,创建一个Css文件夹,在WS的Css文件夹下新建一个基本样式(base.css)和首页样式(index.css)
二、 Css初始化
/*此句话可有可无*/
@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 { 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; }
/* 去掉图片低测默认的3像素空白缝隙*/
img {border:0; vertical-align:middle; }
/*用于表格属性, 表示表格的两边框合并为一条*/
table { border-collapse:collapse; }
body {
/*字号,行高,字体()宋体*/
font:12px/150% Arial,Verdana,"\5b8b\4f53";
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
}
三、 引入Css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不是所有的页面都叫京东</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
</body>
</html>
将index.css也以同样方式引入,注意base.css与index.css的顺序,一定是base.css在index.css上面
四、 Favicon图标
<link rel="shortcut icon" href="favicon.ico">
引入前:
引入后:
图标获取方式:www.jd.com/favicon.ico
淘宝也是一样www.taobao.com/favicon.ico
图片保存在“京东网页”文件夹下,不放入image里。
补充知识
font:字体加粗 字号/行高 字体;(必须有字号和字体,其他可以没有)
S del 删除线
I em 倾斜
U ins 下划线
font-weight:700;(=font-weight:bold;) 字体加粗
font-weight:normal; 让字体不加粗
font-style:normal; 字体不倾斜
text-decoration:none; 不下划线 不删除线
定位: position:static;静态定位 约等于标准流
浮动的不浮动: float:none; none left right
定位的不定位: position: static; absolute relative fixed
下拉框小三角
.dt{
padding:0 20px 0 10px;
position: relative;
}
.dt i{
font:400 15px/15px "宋体";
top:12px;
right:3px;
position: absolute;
height:7px;
overflow: hidden;
width:15px;
}
.dt s{
position: absolute;
top:-8px;
}
制作网页顶部整体代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>不是所有的页面都叫京东</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!--京东的头部导航开始-->
<div class="shortcut">
<div class="w">
<div class="fl">
<div class="dt">送至:北京
<i><s>◇</s></i>
</div>
</div>
<div class="fr">
<ul>
<li>
<!-- 是将你好,请登录与免费注册之间加空格-->
<a href="#"> 你好,请登录</a>
<a href="#" class="col-red">免费注册</a>
</li>
<li class="line"></li>
<li>我的订单</li>
<li class="line"></li>
<li class="fore">
我的京东
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li>京东会员</li>
<li class="line"></li>
<li>企业采购</li>
<li class="line"></li>
<li class="fore tel-jd">
<em class="tel"></em>
手机京东
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">
关注京东
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">
客户服务
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">
网站导航
<i><s>◇</s></i>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
base.css
@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 { 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; }
table { border-collapse:collapse; }
body {
font:12px/150% Arial,Verdana,"\5b8b\4f53";
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
}
/*头部导航开始*/
.shortcut {
height: 30px;
line-height: 30px;
background-color:#f1f1f1;
width: 100%;
}
.dt,
.shortcut .fore{
padding:0 20px 0 10px;
position: relative;
}
.dt i,
.fore i
{
font:400 15px/15px "宋体";
position:absolute;
top:13px;
right:3px;
height:7px;
overflow:hidden;
width: 15px;
}
.dt s,
.fore s{
position: absolute;
top:-8px;
left: 0;
}
.fr li {
float:left;
padding: 0 10px;
}
.fr .line {
width: 1px;
height: 12px;
background-color: #ddd;
margin-top: 9px;
padding:0;
}
.shortcut .tel-jd{
padding:0 20px 0 25px;
}
.tel{
position: absolute;
width: 15px;
height: 20px;
background: url(../images/sprite.png) no-repeat;
left:5px;
top: 5px;
}
顶部效果
topbanner和search的制作
html部分
<!--topbanner部分-->
<div class="topbanner">
<div class="w">
<img alt=""src="images/topbanner.jpg">
<a class="close-banner" href="javascript:;"></a>
</div>
</div>
<!--topbanner部分结束-->
<div class="w">
<div class="logo">
<a title="叮咚" class="jd-a" href="http://www.jd.com" target="_blank">Dawn</a>
<div class="db11">
<a href="#"><img src="images/dong.gif" alt=""/></a>
</div>
</div>
<div class="search">
<!--input:text-->
<input type="text" name="" id="" value="图书开抢"/>
<button>搜索</button>
</div>
</div>
css部分
/*topbanner start*/
.topbanner {
background-color: #8A25C6;
}
.close-banner {
position: absolute;
right: 0;
top: 5px;
width: 19px;
height: 19px;
background: url(../images/close.png) no-repeat;
}
.close-banner:hover {
background-position: bottom;
}
.tp {
position: relative;
}
/*topbanner end*/
/*search左侧*/
.logo {
width: 360px;
height: 75px;
background-color: pink;
float: left;
padding-top: 25px;
background: url(../images/logo.png) no-repeat 0 25px;
position: relative;
}
.jd-a {
display: block;
width: 270px;
height: 60px;
text-indent: -2000em;
}
.db11 {
position: absolute;
width: 180px;
height: 80px;
background-color: pink;
top: 10px;
left: 168px;
}
/*search左侧结束*/
/*搜索框的制作*/
.search {
width: 538px;
height: 36px;
float: left;
/*padding和margin都可以,此处用margin更漂亮*/
margin-top: 25px;
}
.search input {
width: 450px;
height: 32px;
border: 2px solid #B61D1D;
padding-left: 4px;
color:#666;
font: 14px/32px "microsoft yahei";
float:left;
}
.search button{
width: 80px;
height: 36px;
background-color: #B61D1D;
float:left;
font: 16px/36px "microsoft yahei";
color:#fff;
cursor:pointer;
}
images素材
topbanner图:
search左侧图:
鼠标样式
cursor:pointer; 鼠标变成小手
cursor:default; 小白
cursor:text; 文本输入
cursor:move; 移动
效果图
网页布局思路:
给一个盒子:宽度高度;背景边框;位置
购物车的制作
html部分
<div class="car">
<a href="#">D的购物车</a>
<span class="icon1"></span>
<span class="icon2">></span>
<span class="icon3">0</span>
</div>
“span.icon$*3”可以快速打出以上代码,div也是一样
css部分
.car {
width: 96px;
padding-left: 43px;
/*有了行高就不需要高度了,height: 34px;*/
/*background-color: blue;*/
float:right;
margin: 25px 65px 0 0;
/*bd+*/
border: 1px solid #DFDFDF;
/*lh34px*/
line-height: 34px;
position: relative;
}
.icon1 {
position:absolute;
top: 10px;
left: 20px;
width: 16px;
height: 13px;
background: url(../images/sprite.png) no-repeat -1px -59px;
}
.icon2 {
font: 400 13px/13px simsun;
position: absolute;
top: 13px;
right: 15px;
}
.icon3 {
position: absolute;
width: 16px;
height: 14px;
background-color: #C81623;
font-size: 12px;
/*如果不规定行高,就会继承car的行高,0会掉下来*/
line-height: 14px;
/*tac*/
text-align: center;
/*在html里面的颜色不允许简写*/
color: #fff;
top: -4px;
border-radius: 7px 7px 7px 0;
}
border-radius 用来写圆角矩形,大小从左上角->右上角->右下角->左下角顺时针来写。
search框下面热门提示词的制作
html部分
<div class="hotwords">
<a href="#" class="col-red">11月11天</a>
<a href="#">11.11秒杀</a>
<a href="#">买2免1</a>
<a href="#">Note5黑</a>
<a href="#">12期免息</a>
<a href="#">智能科技</a>
<a href="#">清仓</a>
<a href="#">国际服饰</a>
</div>
注意:
(1)用a的原因是:此处不是导航栏不用写的特别正式所以不用li。
(2)行内元素一般只提左右不提上下margin-left margin-left,块内元素和行内块上下左右随便给.
CSS部分
.hotwords {
width: 500px;
padding: 7px 0;
float:left;
}
.hotwords a {
margin-right: 8px;
}
注意:盒子里有一个是浮动的,那个其中的所有盒子都要浮动,没浮动时字没被挡住的原因是字不会被压住,但实际上这个盒子已经被压住。
此部分详单与一共四个盒子:
①左边两个图片
②搜索栏
③购物车
④搜索热词
search和hotwords没有放一个盒子的原因:点hotwords时直接跳转页面,并不会显示在search栏,即search和hotwords内容并无关联,所以分为两个盒子。
头部部分 End