作业一
编写效果如下图所示，网页中由左、右两个图层构成，左边div设置背
景图像，图像居中显示，右边div设置背景图像填充效果，添加有效果文字内容。设计要
求如下:
<div id-"wrap">
<div id="pic"></div>
<div id="text">
<div id=mtitle">木兰花令.拟古决绝词</div>
<div id="author">纳兰性德</div>
<div id="content＞
<p>人生若只如初见， </p>
....
<div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="huyiwei">
<meta name="generator" content="HBuilder X">
<title>css+div</title>
<style>
#wrap {
width: 900px;
height: 520px;
margin: 0 auto;
border: 2px red solid;
margin-top: 5px;
}
div {
text-align: center;
}
#pic {
width: 420px;
height: 300px;
background-image: url(https://img0.baidu.com/it/u=2215247153,1442481192&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=467);
background-repeat: no-repeat;
background-position: center;
float: left;
background-color: #7777aa;
}
#text {
background-image: url(https://img0.baidu.com/it/u=2215247153,1442481192&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=467);
float: right;
width: 420px;
height: 500px;
background-color: #7777aa;
padding: 10px;
font-weight: bold;
}
#title {
font-family: 华文彩云;
font-size: 32px;
}
#author {
font-size: 12px;
font-family: 黑体;
text-align: right;
margin-bottom: 24px;
}
p {
font-family: 隶书;
font-size: 24px;
margin: 2px;
letter-spacing: 0.5em;
line-height: 1.5em;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="pic"></div>
<div id="text">
<div id="title">
木兰花令.拟古决绝词
</div>
<div id="author">
纳兰性德
</div>
<div id="content">
<p>人生若只如初见</p>
<p>何事秋风悲画扇</p>
<p>等闲变却故人心</p>
<p>却道故人人易变</p>
<p>骊山雨罢清宵半</p>
<p>泪雨霖铃终不怨</p>
<p>何如薄幸锦衣郎</p>
<p>比翼连枝当日愿</p>
</div>
</div>
</div>
</body>
</html>作业二
设计如图9-16所示的图文并茂的页面。设计要求:
（1）插入图像为cupjpg，图像向左浮动、边框为“1pX虚线、颜色为gay、边界为
“10px10px 10px 0"、填充为Spx。
（2)Mobile首字母样式为“大小3em、向左浮动”
（3)b1样式为“文字居中、白色、背景为#678”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Head Line</title>
<style>
img{
float: left;
border: 1px dashed gray;
margin: 10px 10px 10px 0;
padding: 5px;
}
p:first-letter{
font-size: 3em;
float: left;
}
h1{
text-align: center;
color: white;
background-color: #678;
}
</style>
</head>
<body>
<h1>
Head Line
</h1>
<div>
<img src="https://img0.baidu.com/it/u=1806475797,3847419358&fm=253&fmt=auto&app=138&f=PNG?w=404&h=550" />
<p>
Moble Widget使用的标准的Web技术，如HTML,CSS,JavaScript等。这些经典的Web技术规范是由W3C（万维网联盟） 的下属各个工作组指定并推进的。作为开发Widget之前的只是准备，在本章中我们将逐一介绍这些技术。
</p>
</div>
</body>
</html>
作业三
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#pic1{
background-image: url(https://img2.baidu.com/it/u=420993361,937356539&fm=253&fmt=auto&app=138&f=JPEG?w=863&h=500);
width: 500px;
height: 150px;
float: left;
}
#title{
height: 150px;
background-color: brown;
}
#test1{
font-size: 30px;
padding-top: 70px;
}
#block{
margin-top: 10px;
}
#test2{
font-size: 30px;
padding-top: 40px;
margin-left: 70px;
}
#block1{
background-color: brown;
height: 500px;
width:200px;
float: left;
}
#block2{
float: right;
background-color: brown;
height: 500px;
width: 1200px;
}
#pic2{
height: 400px;
background-image: url(https://img0.baidu.com/it/u=4243659838,1860439760&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281);
}
#block3{
margin-top: 520px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div>
<div id="pic1">
</div>
<div id="title">
<p id="test1"> 首页 | 博客 | 设计 | 论坛 | 关于</p>
</div>
</div>
<div id="block">
<div id="block1">
<div id="test2">
<p>首页</p>
<p>博客</p>
<p>设计</p>
<p>论坛</p>
<p>关于</p>
</div>
</div>
</div>
<div id="block2">
<p style="text-align: center; font-size: 30px;">欢度春节</p>
<div id="pic2"></div>
</div>
<div id="block3">
<p style="font-size: 30px; text-align: center;">********************************</p>
</div>
</body>
</html>
作业四
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV+CSS布局</title>
<style>
body{
background-color: aliceblue;
}
#nav{
width: 1407px;
margin: auto;
}
#header1{
height: 100px;
background-color: aqua;
margin-bottom:10px ;
}
#header2{
height: 30px;
background-color: burlywood;
margin-bottom:10px ;
}
#center{
clear: both;
}
#left{
width: 340px;
height: 500px;
float: left;
margin-right: 10px;
background-color: cornflowerblue
}
#mid1{
width: 350px;
height: 500px;
float: left;
margin-right: 10px;
background-color:hotpink;
}
#mid2{
width: 340px;
height: 500px;
float: left;
margin-right: 10px;
background-color:darkgreen;
}
#right{
width: 347px;
height: 500px;
float: left;
background-color: darksalmon
}
#footer{
width: 1407px;
height: 40px;
background-color: yellow;
margin-top: 520px;
}
</style>
</head>
<body>
<div id="nav">
<div id="header1">logo</div>
<div id="header2">nav</div>
<div>
<div id="left">Content-Left</div>
<div id="mid1">Content-center-left</div>
<div id="mid2">Content-center-right</div>
<div id="right">Content-right</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
</html>作业五
采用 DIV+CSS 设计页面布局，效果如下所示。要求：
1） 定义全局样式为字体标粗，大小 16px,填充和边距上下都是 0，左右为自动。
2） #container 样式宽度 100%，填充上下 0，左右自动，边界上下 0，左右自动；
3） #header 样式为宽度 100%，高度 70px,背景颜色#99ff66，背景图像为 w3c.png，不重复，
居左上角
4） #nav 样式为宽度 100%，高度 32px,背景颜色#fbfbfb，导航中无序列表无符号，水平居中
显示，列表项为行内元素，填充上下 5px,左右 15px
5） #mainbody 样式为宽度 100%，高度 300px,填充上下 0，左右浮动，边界上下为 0，左右
浮动
6） #left 样式为图层向左浮动，背景色#efefef,宽度 15%，高度 300px。其中无序列表为无符
号的列表，边界 20px
7） #middile 样式表为边界上下为 0，左右 15%，高度 300px，首行缩进 2 个字符；
8） #right 样式表为图层向右浮动，背景色#efefef,宽度 15%，高度 300px
9） #footer 样式表为清除图层左右浮动，宽度 100%，高度 50px,背景颜色#b6b6b6，内容水
平居中显示，填充为 10px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易的W3school教程网站</title>
<style>
span{
color: blue;
text-decoration: underline;
}
LI{
list-style-type: none;
}
body{
font-weight: bold;
font-size: 16px;
padding: 0 auto 0 auto;
}
#container{
width: 100%;
padding: 0 auto 0 auto;
margin: 0 auto 0 auto ;
}
#header{
width:100%;
height: 70px;
background-color: white;
background-image: url(https://img0.baidu.com/it/u=3323874860,1522148268&fm=253&fmt=auto&app=138&f=PNG?w=268&h=103);
background-position: left top;
background-repeat: no-repeat;
}
#nav{
width: 100%;
height: 32px;
background-color: #fbfbfb;
list-style-type: none;
text-align: center;
padding: 5px 15px 5px 15px;
color: blue;
}
#mainbody{
width: 100%;
height: 300px;
padding-top: 0px;
padding-bottom: 0px;
margin-left: 0px;
margin-bottom: 0px;
float: left;
}
#left{
float: left;
background-color: #efefef;
width: 15%;
height: 300px;
list-style-type: none;
color: blue;
text-decoration: underline;
}
#middle{
margin:0 15% 0 15%;
height: 300px;
text-indent: 2em;
}
#right{
float: right;
background-color: #efefef;
width: 15%;
height: 300px;
}
#footer{
clear: both;
width: 100%;
height: 70px;
background-color: #b6b6b6;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="container" class="">
<div id="header" class=""></div>
<div id="nav" class="">
<span style="text-decoration: underline;" >HTML/CSS</span>
<span style="text-decoration: underline;" >JavaScript</span>
<span style="text-decoration: underline;" >Server Side</span>
<span style="text-decoration: underline;" >ASP.NET</span>
<span style="text-decoration: underline;" >XML</span>
<span style="text-decoration: underline;" >Web Services</span>
<span style="text-decoration: underline;" >Web</span>
</div>
<div id="mainbody" class="">
<div id="left" class="">
<ul>
<li>HTML</li>
<LI>XHTML</LI>
<LI>HTML 5</LI>
<LI>CSS</LI>
<LI>CSS3</LI>
<LI>TCP/IP</LI>
</ul>
</div>
<div id="right" class="">
<P>参考手册</P>
<ul style="color: blue;text-decoration: underline;">
<li>HTML/HTML5标签</li>
<li>CSS1.2.3</li>
<li>HTML 颜色</li>
<li>HTML ASCLL</li>
<li>HTML Latin-1</li>
<li>HTML 符号</li>
</ul>
</div>
<div id="middle" class="">
<ul>
<li>HTML 系列教程</li>
<li>从左侧的菜单选择你需要的教程！</li>
</ul>
<ul>
<li>HTML</li>
<LI>HTML 指超文本标签语言。</LI>
<li>HTML 是指通向WEB技术世界的钥匙。</li>
<li>在W3School的HTML教程中，您将学习如何使用HTML来创建站点。</li>
<li>HTML非常容易学习！你会喜欢他的！现在开始学习HTML！</li>
</ul>
<ul>
<li>HTML5</li>
<LI>HTML5是下一代的HTML</LI>
<LI>HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持</LI>
<li>在W3School的HTML5教程中，您将了解HTML5中的新特性</li>
<li>现在就开始学习HTML5!</li>
</ul>
</div>
</div>
<div id="footer" class="">
<p>当使用本站时，代表您已经接受了本站的<span>使用条款</span>和<span>隐私条款</span>。版权所有，保留一切权力。</p>
<p>赞助商：<span>上海高科投资有限公司。</span></p>
</div>
</div>
</body>
</html>
作业六
按如下要求设计 Web 页面,要求：
1） 页面标题为：HTML5 简介
2） 页面内容标题：
h2 号标题字显示“HTML5 是如何起步的？“，“为 HTML5 建立一些规则：”，
h2 标记样式为”字体加粗，颜色白色，背景#006633，填充 10px“.
3） 第一个标题字下，每行一个段落，默认大小和字体，但“编者注：”的样式为加粗、斜体
“；所有段落向右缩进 2 个字符，行高 1.5 倍。
4） 第二个标题字下，是一个无序列表，采用默认格式显示，但无序列表也向右缩进 2 个字
符，行高 1.5 倍。
5） 所有放在图层中，图层 div 样式为上下填充 20px,左右填充为 10px.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 简介</title>
<style>
h2{
font-weight: bold;
color: white;
background-color: #006633;
padding: 10px;
}
span{
font-weight: bold;
font-style: italic;
}
p{
text-indent: 2em;
line-height: 1.5;
}
li{
text-indent: 2em;
line-height: 1.5;
}
div{
padding: 20px 10px 20px 10px;
}
</style>
</head>
<body>
<div>
<h2>HTML5 是如何起步的？</h2>
<p>HTML是W3C与WHATWG合作的结果。</p>
<p><span>编者注：</span>W3C指World Web Consortium，万维网联盟。</p>
<p><span>编者注：</span>WHATWG指Web Hypertext Application Technology Working Group。</p>
<p>WHATWF致力于web表单位和应用程序，而W3C专注于XHTML 2.0，在2006年，双方决定进行合作，来创建一个新版本的HTML</p>
<h2>为 HTML5 建立一些规则：</h2>
<ul>
<li>新特性应该基于HTML,CSS,DOM以及javasc</li>
<li>减少对外部插件的需求（比如 flash）</li>
<li>更优秀的错误处理</li>
<li>更多取代脚本的标记</li>
<li>HTML5应该独立于设备</li>
<li>开发进程应该对公众透明</li>
</ul>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
