Assignment 1
The writing effect is as shown in the figure below. The web page is composed of two layers, left and right. The left div is set with a background image. The image is displayed in the center. The right div is set with a background image fill. Effect, add effective text content. The design requirements are as follows:
<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>Homework 2
Design a page with pictures and text as shown in Figure 9-16. Design requirements:
(1) The inserted image is cupjpg, the image floats to the left, the border is "1pX dotted line, the color is gay, and the border is
"10px10px 10px 0" ;, filled with Spx.
(2)Mobile initial letter style is "size 3em, floating to the left"
(3)b1 style is "text centered, white, background is #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>
Assignment 3
<!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>
Homework 4
<!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>Homework five
Use DIV+CSS to design the page layout, the effect is as follows. Require:
1) Define the global style as bold font, size 16px, padding and margins both up and down as 0, and left and right as automatic.
2) #container style width 100%, padding top and bottom 0, left and right automatic, border top and bottom 0, left and right automatic;
3) #header style is width 100%, height 70px, background color #99ff66, background image is w3c.png, no repetition,
upper left corner
4) #nav style is width 100%, height 32px, background color #fbfbfb, unordered list in navigation, unsigned, horizontally centered
Display, list items are inline elements, filled with 5px top and bottom, and 15px left and right.
5) #mainbody style is width 100%, height 300px, padding top and bottom 0, left and right floating, border top and bottom 0, left and right
float
6) The #left style is for the layer to float to the left, the background color is #efefef, the width is 15%, and the height is 300px. The unordered list is uncharacterized
List of numbers, border 20px
7) The #middile style sheet has a border of 0 for the top and bottom, 15% for the left and right, a height of 300px, and an indent of 2 characters for the first line;
8) #right style sheet floats the layer to the right, background color #efefef, width 15%, height 300px
9) #footer style sheet is clear layer floating left and right, width 100%, height 50px, background color #b6b6b6, content water
Display centered, with padding of 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>
Homework six
Design the Web page according to the following requirements:
1) The page title is: Introduction to HTML5
2) Page content title:
The title word h2 shows "How did HTML5 start?", "Establish some rules for HTML5:",
The h2 tag style is "Bold font, white color, background #006633, padding 10px".
3) Under the first title, there is one paragraph per line, with default size and font, but the style of "Editor's Note:" is bold and italic
";Indent all paragraphs 2 characters to the right, 1.5x line height.
4) Under the second title word, there is an unordered list, which is displayed in the default format, but the unordered list is also indented 2 words to the right.
symbol, line height 1.5 times.
5) Place everything in a layer, and the layer div style is 20px top and bottom padding, and 10px left and right padding.
<!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>