首页 > Web开发 > 详细

CSS仿淘宝首页

时间:2014-11-02 02:09:42      阅读:566      评论:0      收藏:0      [点我收藏+]

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个小时,,,,,,
bubuko.com,布布扣
?

?

?

CSS仿淘宝首页

原文:http://baihe747.iteye.com/blog/2151021

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!