作业（基础）"/>
网页作业（基础）
兹因学校期末作业，因而随便把我以前学的做一个笔记
下面是第一题的题目
首先我们得了解所用到的知识点
1.这里会描述几个定位
静态定位（static）：没有定位，默认
相对定位(relative)：相对于正常位置（原来没有定位之前的位置）进行定位，还要占据位置。
也就是用了相对位置后进行移动，他移动前的位置也被霸占。
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head><body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
绝对定位(absolute)：没有占据位置，而是完全脱离文档流。和浮动差不多（后边会描述）。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head><body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body></html>固定定位(fixed)，相对于浏览器窗口进行定位。用了之后，拖动滚动滑条后，他的位置始终不变，不会随着滚动滑条的移动而被改变显示位置
<html>
<head>
<style type="text/css">
p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body><p class="one">一些文本。</p>
<p class="two">更多的文本。</p></body>
</html>z-index 规定定位的层级（默认0）值：number 值越大层级就越高
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head><body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body></html>下面是改了Z-index
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
</style>
</head><body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body></html>没有定位父级，则相对于整个文档发生偏移，参考最近非static定位的父级定位，fixed 固定定位，相对于浏览器窗口进行定位。因此给父级相对定位，子级绝对定位方向词。left左，right(右), top(顶端), bottom(末端即最下方)，
作业代码如下
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>至尊吾铭</title>
<link href="style/timu1.css" rel="stylesheet" type="text/css" />
</head><body><div class="box"><div class="box_01"><p>box_01</p></div><div class="box_02"><p>box_02</p></div><div class="box_03"><p>box_03</p></div><div class="box_04"><p>box_04</p></div><div class="box_05"><p>box_05</p></div><div class="box_06"><p>box_06</p></div><div class="box_07"><p>box_07</p></div><div class="box_08"><p>box_08</p></div><div class="box_09"><p>box_09</p></div></div><span><a href="">《作业中定位详解》</a></span>
</body>
</html>css:
@charset "utf-8";
/* CSS Document */
.box{width: 420px;height: 320px;background: gold;margin: auto;position: relative;text-align: center;
}
.box_01{background:#6F3;width: 280px;height:50px;position: absolute;}
.box_02{background: #6FF;width: 140px;height: 65px;position: absolute;left: 280px;
}
.box_03{background: #C36;width: 140px;height: 75px;position: absolute;left: 280px;top: 65px;
}
.box_04{background: #666;width: 125px;height: 150px;position: absolute;top: 50px;
}
.box_05{background:#39F;width:155px;height:90px;position:absolute;top: 50px;left: 125px;
}
.box_06{background:#0FF;width:87px;height:60px;position:absolute;top: 140px;left: 125px;
}
.box_07{background:#C03;width: 212px;height: 120px;position: absolute;top: 200px;}
.box_08{background: #7a6e2f;width: 104px;height: 180px;position: absolute;top: 140px;left: 212px;
}
.box_09{background: #3366FF;width: 104px;height: 180px;position: absolute;top: 140px;left: 316px;
}
span {text-align: center;display: block;
}
效果图：
第二题
代码timu2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>至尊吾铭</title><link href="style/timu2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header"><h1>头部区域</h1>
</div><div class="topnav"><a href="">链接填充</a><a href="">链接填充</a><a href="">链接填充</a>
</div><div class="row"><div class="column side"><h2>左侧栏</h2></div><div class="column middle"><h2>主区域内容</h2><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</p></div><div class="column side"><h2>右侧栏</h2></div>
</div><div class="footer"><p>底部区域</p>
</div></body>
</html>
代码timu2.css
* {box-sizing: border-box;
}body {margin: 0;
}/* 头部样式 */
.header {background-color: #f1f1f1;padding: 20px;text-align: center;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接 - 修改颜色 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建三个相等的列 */
.column {float: left;padding: 10px;
}/* 左右两侧宽度 */
.column.side {width: 25%;
}/* 中间区域宽度 */
.column.middle {width: 50%;
}/* 列后面清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {.column.side, .column.middle {width: 100%;}
}/* 底部样式 */
.footer {background-color: #f1f1f1;padding: 10px;text-align: center;
}
第三题
代码timu3.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>至尊吾铭</title><link href="style/timu3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="header"><h1>头部区域</h1>
</div><div class="topnav"><a href="">链接填充</a><a href="">链接填充</a><a href="">链接填充</a>
</div><div class="row"><div class="column side"><h2>左侧栏</h2></div><div class="column middle"><h2>主区域内容</h2><p>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</p></div>
</div><div class="footer"><p>底部区域</p>
</div></body>
</html>
代码timu.css
* {box-sizing: border-box;
}body {margin: 0;
}/* 头部样式 */
.header {background-color: #f1f1f1;padding: 20px;text-align: center;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接 - 修改颜色 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建三个相等的列 */
.column {float: left;padding: 10px;
}/* 左右两侧宽度 */
.column.side {width: 25%;
}/* 中间区域宽度 */
.column.middle {width: 75%;
}/* 列后面清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {.column.side, .column.middle {width: 100%;}
}/* 底部样式 */
.footer {background-color: #f1f1f1;padding: 10px;text-align: center;
}
代码timu4.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>至尊吾铭</title><link href="style/timu4.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="boxx"><img src="images/timu4/01.jpg"><span><a href="">网页设计与制造</a></span><p>本书是一本基于Web标准的运用CSS制作网站的教材。本书由吴丰编写，全书以实例为主，从理论到实践，使读者重新认识网页制作过程。</p><div class="boxx3"><div><a href="">网页设计与制造(第五版)</a></div><div><a href="">网页设置与制作(Dreamweaver)</a></div><div><a href="">精通CSS</a></div><div><a href="">HTML XHTML CSS基础教程(第六版)</a></div><div><a href="">网页设计与制造</a></div><div><a href="">CSS入门</a></div><div><a href="">超越CSS：WEB设计艺术精髓</a></div></div>
</div>
</body>
</html>
代码timu4.css
.boxx{width: 300px;height: 400px;background: #66FFFF;display: inline-block;
}
img{float: left;margin-left: 10px;margin-top: 10px;margin-right: 10px;width: 100px;height: 160px;display: inline-block;
}
span{margin-top: 10px;display: inline-block;
}
.boxx3>div{border-top:1px dashed #68a3ff;height:30px;width:300px;
}
5题
代码timu5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>至尊吾铭</title><link href="style/timu5.css" rel="stylesheet" type="text/css">
</head>
<body><div class="box1"><span>已注册用户登录</span><div class="box2"><form><div class="box2_1">用户名：<input type="text" name="username"></div><br><div class="box2_2">密码：<input type="password" name="userpassword"></div><br><div class="box2_3"><input type="checkbox" name="vehicle" valu="Bike"><span><a href="">记住我</a></span>  <input type="submit" value="登录"></div></form><p><a href="">您忘记密码？</a></p></div><span>未注册创建账号</span><div class="box3"><div class="box3_span"><a href="">您的电子邮件不会被公布出去，但是必须填写，写您注册之前请认真阅读服务条款</a></div><form><div class="box3_1">用户名：<input type="text" name="username1"><span>*(最多30个字符)</span></div><div class="box3_2">电子邮箱：<input type="text" name="Emeal">*</div><div class="box3_3">密码：<input type="password" name="pwd"><span>*(最大15个字符)</span></div><div class="box3_4">重复密码：<input type="password" name="pwd">*</div><div class="box3_5">同意服务条款<input type="checkbox"><a href="">先看看条款？</a>*</div><div class="box3_6"><input type="submit" value="提交">  <input type="reset" value="重置"></div></form><div><p><a href="">*在提交您的注册信息时，我们认为您已经同意了我们的服务条款。</a></p><p><a href="">*这些条款可能在未经您同意的时候进行修改。</a></p></div></div><div class="fu1"><a href="">用户登录</a></div><div class="fu2"><a href="">用户注册</a></div></div>
</body>
</html>代码timu5.css
.box1{background: #ffffff;width: 500px;height: 651px;border: 1px solid #00FFFF;
}
.box2{width: 460px;height: 160px;border: 1px solid #00FFFF;margin-left: 20px;margin-top: 30px;
}
.box3{width: 460px;height: 367px;border: 1px solid #00FFFF;margin-left: 20px;margin-top: 30px;
}
.box1>span{position: relative;left: 20px;top: 10px;
}
.box2_1{margin-left: 100px;margin-top: 30px;
}
.box2_2{margin-left: 116px;margin-top: -11px;
}
.box2_3{margin-left: 75px;margin-top: -11px;
}
.box2>p{margin-left: 10px;
}
.box3_1{margin-left: 100px;margin-top: 30px;
}
.box3_2{margin-left: 84px;margin-top: 10px;
}
.box3_3{margin-left: 116px;margin-top: 10px;
}
.box3_4{margin-left: 84px;margin-top: 10px;
}
.box3_5{margin-left: 64px;margin-top: 10px;
}
.box3_6{margin-left: 216px;margin-top: 10px;
}
.box3_span{margin-top: 10px;
}
.fu1{position: relative;border: 1px solid #00FFFF;width: 100px;height: 20px;margin-top: -593px;margin-left: 50px;text-align: center;
}
.fu2{position: relative;border: 1px solid #00FFFF;width: 100px;height: 20px;margin-top: 189px;margin-left: 50px;text-align: center;
}6题
代码timu6.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>至尊吾铭</title><link href="images/timu6/div.css" rel="stylesheet" type="text/css">
</head>
<body><div class="cleaner"></div><div class="cleaner_with_height"></div><div class="cleaner_with_divider"></div><div id="templatemo_container"></div><div id="templatemo_header"><div id="site_title"></div></div><div id="templatemo_menu"><ul><li><a href=""><b>首页</b></a></li><li><a href=""><b>茶叶</b></a></li><li><a href=""><b>餐具</b></a></li><li><a href=""><b>美食</b></a></li><li><a href=""><b>公司</b></a></li><li><a href=""><b>联系</b></a></li></ul></div><div id="templatemo_top_dishes"><h1>推荐套餐</h1><h2 class="top_dishes_box"><img src="images/timu6/images/templatemo_image_01.jpg">西湖牛肉<p>它香醇润滑、鲜美可口，常会提前上席作为润喉开胃的羹汤。西湖牛肉也是深受普通老百姓喜爱的食品。<a>Read mor...</a></p></h2><h2 class="top_dishes_box"><img src="images/timu6/images/templatemo_image_02.jpg">紫菜包饭<P>紫菜包饭是一道十分常见的韩式料理，与日本料理中的寿司十分相似。<a>Read more...</a></P></h2><h2 class="top_dishes_box"><img src="images/timu6/images/templatemo_image_03.jpg">绿晶汤菜<p>汤菜，就是指带有较多汤汁的菜肴。汤菜，一般而言，菜是多于汤的，或汤菜各半，或汤略多于菜。<a>Read more...</a></p></h2><h2 class="top_dishes_box"><img src="images/timu6/images/templatemo_image_04.jpg">肘花<p>其皮厚、筋多、胶质量、瘦肉多、常带皮烹饪、肥而不腻。<a>Read more...</a></p></h2></div>
<!-- <div id="templatemo_content">--><!-- </div>-->
<!-- <div id="templatemo_innter_content"></div>-->
<!-- <div class="top"></div>-->
<!-- <div class="bottom"></div>-->
<!-- <div id="templatemo_content_left"></div>-->
<!-- <div id="templatemo_content_right"></div>--><div id="templatemo_footer">Copyright @ 2011<a href=""> wuyu </a>| Designed by wf</div>
</body>
</html>
代码div.css
body {margin: 0;padding: 0;line-height: 1.5em;font-family: Verdana, Arial, san-serif;font-size: 11px;color: #333333;background: #fff;
}a:link, a:visited { color: #b7bd19; text-decoration: none; font-weight: bold; }
a:active, a:hover { color: #d8df44; text-decoration: underline; }img {padding: 0px;margin: 0px;
}p {margin: 0px;padding: 0px;text-align: justify;
}h1 {margin: 0 0 15px 0;
}.cleaner {clear: both;width: 100%;height: 1px;font-size: 1px;
}.cleaner_with_height {clear: both;width: 100%;height: 30px;font-size: 1px;
}.cleaner_with_divider {clear: both;width: 100%;height: 15px;border-bottom: 1px solid #333;margin-bottom: 25px;font-size: 1px;
}#templatemo_container {width: 960px;margin: 0 auto;padding: 0 5px;background: url(images/templatemo_main_bg.jpg) repeat-y;
}/* header */
#templatemo_header {width: 920px;height: 155px;padding: 0 20px 0 20px;background: url(images/templatemo_header.jpg) no-repeat;
}#templatemo_header #site_title {float: left;font-size: 30px;font-weight: bold;color: #fff;padding: 60px 0 10px 0;width: 325px;height: 55px;background: url(images/templatemo_logo.jpg) no-repeat bottom;
}
/* end of header */
/* menu */
#templatemo_menu {clear: both;width: 960px;margin: 0;height: 45px;background: url(images/templatemo_menu_bg.jpg) right no-repeat;
}#templatemo_menu ul {padding: 0 0 0 10px;margin: 0 auto;height: 45px;list-style: none;
}#templatemo_menu ul li {float:left;padding-right: 5px;
}#templatemo_menu li a {float: left;display: block;color: #fff;font-size: 12px;height: 45px;line-height: 40px;text-align: center;padding: 0px 0 0 0px;
}
#templatemo_menu li a b {float: left;display: block;padding: 0px 24px 0 24px;
}
#templatemo_menu li.current a, #templatemo_menu li a:hover {color: #b4c927;text-decoration: none;background: url(images/templatemo_menu_hover_right.jpg) right top no-repeat;
}
#templatemo_menu li.current a b, #templatemo_menu li a:hover b {color: #b4c927;text-decoration: none;background: url(images/templatemo_menu_hover_left.jpg) left top no-repeat;
}
/* end of menu *//* top dishes */
#templatemo_top_dishes {clear: both;width: 960px;padding: 50px 0px;background: url(images/templatemo_content_top.jpg) top no-repeat;
}#templatemo_top_dishes h1 {color: #1b2308;font-size: 24px;margin: 0 20px 15px 20px;padding: 0 0 15px 0;border-bottom: 1px dotted #1b2308;
}#templatemo_top_dishes h2 {font-size: 14px;color: #1f1f1f;margin: 0;padding: 0 0 5px 0;
}#templatemo_top_dishes p {margin: 0px;padding: 0px;
}#templatemo_top_dishes .top_dishes_box {float: left;width: 215px;margin-left: 20px;
}#templatemo_top_dishes .top_dishes_box img {margin-bottom: 15px;border: 5px solid #e1e0e0;
}
/* end of banner *//* content */
#templatemo_content {position: relative;color: #fff;width: 920px;padding: 0;margin-left: 20px;background: url(images/templatemo_content_bg_middle.jpg) repeat-y;
}#templatemo_innter_content {background: url(images/templatemo_content_bg_bottom.jpg) bottom center no-repeat;
}#templatemo_content .top {position: absolute;display: block;top: 0;left: 0;width: 920px;height: 15px;background:url(images/templatemo_content_bg_top.jpg) bottom center no-repeat;
}#templatemo_content .bottom {position: absolute;float: left;bottom: 0;left: 0;width: 920px;height: 175px;background: url(images/templatemo_content_bg_bottom.jpg) bottom center no-repeat;
}#templatemo_content #templatemo_content_left {float: left;padding: 40px 0 0 35px;width: 545px;
}#templatemo_content #templatemo_content_right {float: right; padding: 40px 35px 0 0;width: 245px;}#templatemo_content_left h1 {font-size: 24px;padding: 3px 0 15px 0;margin: 0 0 15px 0;}#templatemo_content_left p {padding-bottom: 10px;margin: 0px;
}#templatemo_content_left img {float: left;margin: 3px 15px 0 0;border: 5px solid #4b5e1e;
}#templatemo_content_right h1 {color: #374712;font-size: 20px;height: 30px;margin: 0px;padding: 15px 0 0 20px;background: url(images/templatemo_header_bg.jpg) no-repeat;
}#templatemo_content_right h2 {color: #b7bd19;font-size: 16px;margin: 0 0 5px 0;padding: 0 0 5px 0;
}#templatemo_content_right img {border: 5px solid #4b5e1e;margin: 0 0 5px 0;
}#templatemo_content_right p {margin: 0 0 5px 0;padding: 0 0 5px 0;
}#templatemo_content_right .right_column_section {clear: both;margin: 20px;
}
/* left column *//* footer */
#templatemo_footer {clear: both;color: #333;width: 960px;margin-top: 30px;padding: 20px 0px 20px 0;text-align: center;background: #ced1c8;
}#templatemo_footer a {color: #333;font-weight: normal;
}
/* end of footer */
原创链接：
更多推荐
网页作业（基础）
发布评论