项目任务
项目分析
1.该网页分为左右两大板块
2.左边为字图结合,可在图片处理工具中将图片设计好,再将该图片设为背景即可
3.左图中文字部分可用有序列表制作
4.左图制作好后,设置左浮动,在进行右边的文字简介编辑
5.右边文字可分为三个段落,分别编辑,并将"传智播客设计学院"字体加粗即可
下面我们来看代码
HTML 部分代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>传智博客设计学院首页</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="one">
<h1>传智播客设计学院简介</h1>
<p align="center">更新时间:2015年07月28日14时08分 来源:传智播客</p>
<hr/>
<div class="a">
<ul>
<div class="ud"></div>
<li>移动时代的主流设计师</li>
<li>集中于IT企业</li>
<li>门槛高 薪水很高</li>
<li>竞争少 要求全方面人才</li>
<li>所需技能:</li>
<div class="b"></div>
<li>平均月薪:6570</li>
</ul>
</div>
<div>
<p><span> 传智博客设计学院</span>注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，结合大量的案列和实战项目，毕业后相当于两年工作经验</p>
<p><span> 传智博客设计学院</span>传智播客设计学院教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，成为平面、网页、UI设计都精通的全能设计师。</p>
<p> 迄今为止<span>传智博客设计学院</span>已经培养出上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。
</p>
</div>
</div>
</body>
</html>
CSS部分代码
@charset "utf-8";
h1{
text-align:center;
}
.a{
height:275px;
width:615px;
background-image:url(images/1.png);
float:left;
}/* CSS Document */
.one{
height:400px;
width:1030px;
margin:50px;
}
ul{
color:red;
font-size:9px;
}
.b{
height:100px;
width:165px;
}
.ud{height:60px;}
.div2{
float:left;
}
span{font-weight:bold}
最后效果图
总结
制作过程中,要灵活运用外内边距,冷静分析网页的元素构成,尽量减少代码长度,增强代码可读性
更多推荐
传智播客设计学院简介网页代码
发布评论