1.我用的软件是WebStorm10.0.3这个软件，它和sublime是不同的，因为sublime的头部是
而WebStorm这个软件打开是这种模式：
2.通过webstorm打开页面有两种方式:右上角点击浏览器图标,快捷键:Alt+F2，点击浏览器必须是自己电脑上安装这此浏览器才能运行
3.显示首页标题的图标：<link rel="icon" href="图片名称.icon" />，图标通常放在根目录下
在<head></head>中写上<link rel="icon" href="相对路径" />
4.有时候我们在WebStorm软件中写的代码不是很规范，在保证自己代码没有任何错误的情况下，使用快捷键Ctrl+Alt+L来格式化代码。
5.有时候我们需要某个盒子的透明度时，可以这样写代码：backgroung-color:rgba(0,0,0,0-1的小数);
6.给某盒子外边框设置阴影时，在其css代码中写：box-shadow:0 0 5px red；
第一个值表示阴影水平方向显示，正负号表示不同的方向
第二个值表示阴影上下方向显示，同样正负号表示不同的方向
第三个值表示阴影的宽度
第四个值表示阴影的颜色
7.这是我练习的一部分代码
html
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title> 6 <meta name="description" 7 content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/> 8 <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/> 9 <link rel="icon" href="../favicon.ico"/> 10 <link rel="stylesheet" href="../css/base.css"/> 11 <link rel="stylesheet" href="../css/head.css"/> 12 <link rel="stylesheet" href="../css/iconfont/iconfont.css"/> 13 </head> 14 <body> 15 <!--头部开始--> 16 <div class="head-top"> 17 <div class="w"> 18 <a href="#"> 19 <img src="../images/58bf775dNc190a8ff.png" alt=""/> 20 <i class="iconfont"></i> 21 </a> 22 </div> 23 </div> 24 <!--头部结束--> 25 26 <!--head-shortcut开始了--> 27 <div class="shortcut"> 28 <div class="w"> 29 30 <ul class="fl"> 31 <li> 32 <i class="iconfont"></i> 33 <a href="#">北京</a> 34 </li> 35 </ul> 36 <ul class="fr"> 37 <li> 38 <a href="#">你好，请登录</a> 39 <a href="#" class="col-red">免费注册</a> 40 </li> 41 <li><a href="#"> 我的订单</a></li> 42 <li class="line"></li> 43 <li><a href="#"> 我的京东</a><i class="iconfont"></i></li> 44 <li class="line"></li> 45 <li><a href="#"> 京东会员</a></li> 46 <li class="line"></li> 47 <li><a href="#"> 企业采购</a></li> 48 <li class="line"></li> 49 <li> 客户服务<i class="iconfont"></i></li> 50 <li class="line"></li> 51 <li> 网站导航<i class="iconfont"></i></li> 52 <li class="line"></li> 53 <li class="phone-jb"> 手机京东 54 <div class="phone-erweima"></div> 55 </li> 56 </ul> 57 58 </div> 59 </div> 60 <!--head-shortcut结束了--> 61 62 <!--第三部分开始了--> 63 <div class="nav w"> 64 <div class="logo"> 65 <a href="#">京东</a> 66 </div> 67 <div class="research"> 68 <input type="text" class="research-text" value="我好累，真的好累"/> 69 <input type="button" class="research-btn"/> 70 <i class="iconfont"></i> 71 </div> 72 <div class="shopping-cart"> 73 <i class="iconfont"></i> 74 <a href="#">我的购物车</a> 75 <i class="ling">0</i> 76 </div> 77 <div class="words"> 78 <ul> 79 <li><a href="#" class="col-red"> 399减120</a></li> 80 <li><a href="#"> 领500神券</a></li> 81 <li><a href="#"> 农用物资</a></li> 82 <li><a href="#"> 春装7折</a></li> 83 <li><a href="#"> 2件8.8折</a></li> 84 <li><a href="#"> 电热毯双人</a></li> 85 <li><a href="#"> 单间包女</a></li> 86 <li><a href="#"> 299减160</a></li> 87 </ul> 88 </div> 89 <div class="bottom"> 90 <ul> 91 <li><a href="#">秒杀</a></li> 92 <li><a href="#">优惠券</a></li> 93 <li><a href="#">闪购</a></li> 94 <li><a href="#">拍卖</a></li> 95 </ul> 96 <div class="box"></div> 97 <ul> 98 <li><a href="#"> 服装</a></li> 99 <li><a href="#"> 京东超市</a></li> 100 <li><a href="#"> 生鲜</a></li> 101 <li><a href="#"> 全球购</a></li> 102 </ul> 103 <div class="box"></div> 104 <ul> 105 <li><a href="#">京东金融</a></li> 106 </ul> 107 </div> 108 <div class="guanggao"> 109 <a href="#"></a> 110 </div> 111 </div> 112 <!--第三部分结束了--> 113 </body> 114 </html>
css
1 /*head-top开始了*/ 2 .head-top{ 3 height: 80px; 4 background-color: #281B83; 5 } 6 .head-top .w{ 7 position: relative; 8 } 9 .head-top .w i{ 10 height: 20px; 11 20px; 12 background-color: rgba(0,0,0,0.2); 13 display: block; 14 line-height: 20px; 15 text-align: center; 16 position: absolute; 17 top:8px; 18 right: 15px; 19 } 20 .head-top .w i:hover{ 21 background-color:rgba(0,0,0,.8) ; 22 } 23 /*head-top结束了*/ 24 25 26 /*head-shortcut开始了*/ 27 .shortcut{ 28 height:30px; 29 line-height: 30px; 30 background-color: #E3E4E5; 31 border-bottom: 1px solid #333; 32 } 33 .shortcut .w .fl{ 34 margin-left: 210px; 35 36 } 37 .shortcut .w .fl i{ 38 color: #C81623; 39 font-size: 14px; 40 } 41 .shortcut .w .fl a{ 42 font-size: 12px; 43 font-family: "宋体"; 44 color: #999; 45 } 46 .shortcut .w .fr li{ 47 float: left; 48 padding: 0 10px; 49 } 50 .shortcut .w .fr .line{ 51 1px; 52 height: 10px; 53 background-color: #cccccc; 54 margin-top: 10px; 55 padding:0; 56 } 57 .shortcut .w li i{ 58 font-size: 10px; 59 margin-left: 3px; 60 } 61 .shortcut .w .fr .phone-jb{ 62 position: relative; 63 } 64 .shortcut .w .fr .phone-jb:after{ 65 content: ""; 66 display: block; 67 height: 0; 68 0;
//三角型写法 69 border-bottom: 8px solid #fff; 70 border-top: 5px solid transparent; //设置背景色为空白 71 border-right: 5px solid transparent; 72 border-left: 5px solid transparent; 73 position: absolute; 74 top: 19px; 75 left: 28px; 76 } 77 .shortcut .w .fr .phone-jb .phone-erweima{ 78 66px; 79 height: 66px; 80 border: 1px solid #989898; 81 position: absolute; 82 right: 1px; 83 background: url("../images/mobile_qrcode.jpg") no-repeat center; 84 } 85 /*head-shortcut结束了*/ 86 87 /*第三部分开始了*/ 88 .nav{ 89 height: 140px; 90 } 91 .nav .logo{ 92 190px; 93 height: 170px; 94 float: left; 95 } 96 .nav .logo a{ 97 display:block; 98 190px; 99 height: 170px; 100 background-image: url(../images/logo.v2.png); 101 text-indent: -9999px; 102 } 103 .nav .research{ 104 545px; 105 height: 35px; 106 float: left; 107 margin-top: 25px; 108 margin-left: 130px; 109 border: 1px solid #F10215; 110 position: relative; 111 } 112 .nav .research .research-text{ 113 height: 35px; 114 498px; 115 line-height: 35px; 116 padding-left: 3px; 117 font-size: 10px; 118 color: #989898; 119 float: left; 120 } 121 .nav .research .research-btn{ 122 height: 35px; 123 44px; 124 background-color: #F10215; 125 float: left; 126 } 127 .nav .research i{ 128 color: #fff; 129 font-weight: 700; 130 position: absolute; 131 top: 10px; 132 right: 13px; 133 } 134 .nav .shopping-cart{ 135 188px; 136 height: 33px; 137 border: 1px solid #999999; 138 /*line-height: 33px;*/ 139 /*text-align: center;*/ 140 float: right; 141 margin-right: 100px; 142 margin-top: 25px; 143 } 144 .nav .shopping-cart .iconfont{ 145 color: #F10215; 146 display: block; 147 height: 33px; 148 margin-top: 10px; 149 margin-left: 50px; 150 float: left; 151 } 152 .nav .shopping-cart a{ 153 display: block; 154 height: 33px; 155 line-height: 33px; 156 color: #F10215; 157 float: left; 158 margin-left: 2px; 159 } 160 .nav .shopping-cart .ling{ 161 14px; 162 height: 14px; 163 background-color: #F10215; 164 float: left; 165 line-height: 14px; 166 text-align: center; 167 margin-top: 5px; 168 border-radius: 7px; 169 color: #fff; 170 } 171 .nav .words{ 172 500px; 173 height: 35px; 174 float: left; 175 margin-left: 130px; 176 } 177 .words li{ 178 height: 35px; 179 float: left; 180 line-height: 35px; 181 text-align: center; 182 margin-right: 10px; 183 } 184 .words li a{ 185 font-family: "微软雅黑"; 186 font-size: 12px; 187 color: #989898; 188 } 189 .words li a:hover{ 190 color: #F10215; 191 } 192 .nav .bottom{ 193 670px; 194 height: 30px; 195 background-color: aquamarine; 196 float: left; 197 margin-left: 60px; 198 margin-top: 12px; 199 } 200 .nav .bottom li, 201 .nav .bottom ul, 202 .nav .bottom .box{ 203 float: left; 204 } 205 206 /*========*/ 207 .nav .guanggao{ 208 190px; 209 height: 40px; 210 float: right; 211 } 212 .guanggao a{ 213 display: block; 214 background:url("../images/58c01fabN6df678a6.png") no-repeat center; 215 190px; 216 height: 40px; 217 } 218 219 /*========*/ 220 221 /*第三部分结束了*/
显示结果
明天继续哦！