CSS仿淘宝首页

CSS是对HTML标签内容惊醒修饰,星期二的做了一个放淘宝首页的简单首页,使用表格做的 里面使用了少量的div定位,主要是学习 本人是刚接触到html和css语言,

 

总结:  

     1,网站的宽度要使用百分比,这样网站会随着浏览器的大小而改变,在写淘宝首页的时候没有考虑到这个问题

     2,链接的样式不要写成 a:link{}    这样后面所有的连接都会用到这个样式,初学者很难想到原因

  

    3,网页和图片都要放到站点中,这样网页文件的移动不会导致图片无法显示

 

 

+++++++++++++++++++++++++++++++++++CSS总结:

  常用的样式; 

   1), 设置网页置顶

    

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	}

 

 

默认是有边距的,设置所有的外边距为0px

 

 

  2 ),设置链接无下划线

    

text-decoration: none;

 

3),淘宝搜索框的样式设置

 width:650px;
 border:4px solid #ff3300;
height:30px;
vertical-align:top;
border-right:none;

 

     

4),搜索按钮的设置

border:4px solid #ff3300;  
 width:100px;
 height:40px;
background:#ff3300;
font-size:20px;
color:#FFFFFF;
margin-left:0px; 左边距为0
border-left:none; 左边无边框
vertical-align:top; 向上对齐
 

 

5),使用div定位

 

#Layer3 {
	position:absolute;
	left:1004px;
	top:243px;
	width:280px;
	height:466px;
	z-index:2;
	background-color:#F7F7F7;
}

 

截图展示一下,第一次完全手写的,虽然谢了快8个小时,,,,,,

 

 

 

评论

1 楼 一级天灾 2014-11-03  

ps切片么？