WEB课堂作业练习 1 （div布局，表格，锚点，列表）

程序员文章站 2022-05-12 12:30:12

...

WEB课堂作业练习 1 （div布局，表格，锚点，列表）

div布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
    <div class="menu">这是menu部分</div>
    <div class="header">这是header部分</div>
    <div class="content">这是concent-left部分</div>
    <div class="sidebar">这是concent-right部分</div>
    <div class="footer">这是footer部分</div>
    </div>
    <style>
    *{
        margin:0px;
        padding:0px;
    }
    .box{
        width:1200px;
        margin:30px auto;
    }
.menu{
    height:25px;
    background-color :red;
    text-align:center;

}
.header{
    height:120px;
    background-color:blue;
    
}
.content{
    height:320px;
    background-color :yellow;
    float:left;
    width:50%;
}
.sidebar{
    height:320px;
    background-color :green;
    float:left;
    width:50%;
}
.footer{
clear:both;
background-color:pink;
width:1200px;
}</style>
</body>
</html>

效果图
WEB课堂作业练习 1 （div布局，表格，锚点，列表）

表格


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
    <table border="2" cellspacing="10" width="20">
        <tr>
            <td>商品</td>
            <td>数量</td>
            <td>单价</td>
            <td>备注</td>
        </tr>
        <tr>
            <td>短袖</td>
             <td>70</td>
            
         <td align="center" colspan="2" rowspan="2">无</td>
         
        </tr>
        <tr>
            <td>裤子</td>
             <td>50</td>
            
        </tr>
    </table>  
    
     
   
</body>
</html>

效果图
WEB课堂作业练习 1 （div布局，表格，锚点，列表）

锚点链接

在这里插入代码片
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body{
			background-image: url(bg.jpg);
		}	
	</style>
</head>
<body>
<h2>目录</h2>
<ul>
	<li><a href="#1">基本信息</a></li>
	<li><a href="#2">作品原文</a></li>
	<li><a href="#3">注释</a></li>
	<li><a href="#4">作者简介</a></li>
</ul>
<h2><a id="1">基本信息</h2>
【作品名称】《江村即事》 <br>
【创作年代】中唐 <br>
【作者姓名】司空曙 <br>
【作品名称】七言绝句 <br>
<h2><a id="2">作者原文</h2>
<p style="font-size:24px;text-align: center;"><a href="http://www.baidu.com">江村即事</a></p>
<p style="font-size:12px;color: red;text-align: center;">（唐）司空曙 </p>
<hr style="width:30%;height: 3px;background-color: red;border:0px;">
<p style="text-align: center;">钓罢归来不系船，</p>
<p style="text-align: center;">江村月落正堪眠，</p>
<p style="text-align: center;">纵然一夜风吹去，</p>
<p style="text-align: center;">只在芦花浅水边。</p>
<h2><a id="3">注释</h2>
<ol>
	<li>罢：完了。系：系好。</li>
	<li>正堪眠：正是睡觉的好时候。</li>
	<li>纵然：即使。</li>
	<li>即事：以当前的事物为题材所做的诗。</li>
</ol>
<H2><a id="4">作者简介</H2>
<p style="text-indent: 2em">司空曙(约720-790年)，字 文明，或作文初。广平（今河北永年县东南）人，大历十 才子之一，唐代诗人。约唐代宗大历初前后在世。大历年进 士，磊落有奇才，与李约为至交。性耿介，不干权要。家无 担石，晏如也。尝因病中不给，遣其爱姬。韦辠节度剑南， 辟致幕府。授洛阳主簿。未几，迁长林县丞。累官左拾遗。 终水部郎中。曙诗有集二卷，登进士第，不详何年。曾官主 簿。大历五年任左拾遗，贬长林(今湖北荆门西北)丞。贞元 间，在剑南西川节度使韦皋幕任职，官检校水部郎中，终虞 部郎中。曙为卢纶表兄，亦是"大历十才子"之一。其诗多为 行旅赠别之作，长于抒情，多有名句。胡震亨曰："司空虞 部婉雅闲淡，语近性情。"(《唐音癸签》卷七)有《司空文 明诗集》。其诗朴素真挚，情感细腻，多写自然景色和乡情 旅思，长于五律。诗风闲雅疏淡。</p>
<a href="#"><img src="司空曙.jpg"></a>
</body>
</html>

效果图
WEB课堂作业练习 1 （div布局，表格，锚点，列表）

列表

在这里插入代码片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style type="text/css">
	body,ul,li,a
	{
		padding: 0;
		margin: 0;
	}
	body
	{
		margin-top: 50px;
		background-color:#e6e6e6;
		color: #fff; 
	}
	.menu
	{
		font-size: 0;
		padding: 0;
		height: 50px;
		padding-left: 5%;
		background-color: #00a2ca;
		position: relative;
	}
	.menubar
	{
		margin: 0 auto;
		position: absolute;
		list-style-type: none;
		width:20%;
		overflow-y: auto;
	}
 
	.menubar li
	{
		padding:0px 5px;
		display:inline-block;
		cursor: pointer;
		line-height: 50px;		
	}
	.menubar li:hover
	{
	background-color:#0095bb;
	}
	.menubar li.menu-value
	{
		background-color: #0095bb;	
	}
 
	.menubar a
	{
		display: block;
		height: 50px;
		font-family: "微软雅黑","Microsoft Yahei","Hiragino Sans GB",tahoma,arial,"宋体" ;
		font-size: 15px;
		text-align: center;
		text-decoration: none;
		color: #fff;
	}
 
</style>
 
<body>
<div class="menu">
	<ul class="menubar">
		<li class="menu-value" ><a href="">首页</a></li>
		<li class="" ><a href="">HTML</a></li>
		<li class="" ><a href="">css</a></li>
	</ul>
</div>

    <li><a href="https://www.sohu.com/a/226423855_355353"><img src="1.png" />怎样验证自己缺不缺觉？</a><br /></li>
    <a href="http://www.baidu.com"><img src="1.png" />华语乐坛第一*</a><br />
    <a href="http://www.baidu.com"><img src="1.png" />get!创意五色千焗面</a><br />
    <a href="http://www.baidu.com"><img src="1.png" />富察皇后仿妆，眼神变柔和</a><br />
    <a href="http://www.baidu.com"><img src="1.png" />避免沉默的五个聊天小技巧</a><br>
    <a href="http://www.baidu.com"><img src="1.png" />全世界最难的名字，笑哭</a><br />
    <a href="http://www.baidu.com"><img src="1.png" />为啥你会在同一时间醒来</a><br />
   
</body>
</html>

效果图
WEB课堂作业练习 1 （div布局，表格，锚点，列表）