hello,大家好,我是一个刚学习没多久的CSS程序员(目前好像还不是哈)。
自从学了javaCSS头发掉的也不快了,但是唯一的缺点,我****视频太多了,惹不起惹不起。
关于制作一个简单的学习网操作
1.准备html和一个图片文件
2.准备CSS样式
3.确定版心(是1200像素)和各个模块。
学习网分析
定位
如果,说浮动,关键在一-个“浮”字上面,那么我们的定位,关键在于-一个“位”上。
下面代码复制上
代码:
标题名称
这个我是弄的顺丰快递 <title>顺丰快递</title>
搜索框部分
/*搜索框部分*/
.search{
width: 410px;/*360+50*/
height: 38px;
border: 1px solid #00a4ff;
float: right;
}
.search input[type=text]{/* 属性选择器,type为text的文本框*/
width: 350px;
height: 35px;
float: left;
}
.search input[type=submit]{/* 属性选择器,type为text的文本框*/
background-color: pink;
width: 42px;
height: 42px;
background-color: #00a4ff;
float: left;
background: #00a4ff url(images/搜索框.png) center center no-repeat;
}
背景就是中间那个大图哦~
.banner-in{
height: 420px;
background:pink url(链接存放地方) no-repeat 0 0;
}
导航栏
就是图片中的运单追踪、我要寄件、运费时效查询、服务网点查询、收寄范围查询这一些
.slidebar li a { /*左边导航栏样式*/
color: #000;
font-size: 16px;
font-family: "宋体";
padding-left: 10px;
/*a是行内元素,没有大小需要转换*/
display: block;
height: 45px;
line-height: 45px;
margin-top: 5px;
}
关于头部代码
首页、物流、服务支持、关于我们、联系我们这些是根据你网站是什么类型的,比如我这里就是物流
<div class="navbar"><!-- 头的内容 -->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">物流</a></li>
<li><a href="#">服务支持</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
小课程
这些可以自行设置哦!
<!-- 小课表部分 -->
<d1 class="timetable">
<dt>顺丰快递</dt>
<dd><h4>冷运服务</h4>
顺丰拥有强大的管理系统
</dd>
<dd>
<h4>快递服务</h4>
顺丰会满足客户需求。
</dd>
<dd>
<h4>仓储服务</h4>
顺丰拥有很大的仓库
</dd>
</d1>
关于logo
<div class="logo">
<img src="链接" alt="">
</div>