天天看點
傳回

CSS頁面布局作業

  1. 使用CSS制作如下布局的頁面：
    CSS頁面布局作業
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.box1{
			position: absolute;
			background-color: crimson;
			top:0px;
			left:0px;
			width:277px;
			height:103px;
		}
		.box2{
			position: absolute;
			background-color: chartreuse;
			top:57px;
			left:291px;
			width:679px;
			height:46px;
		}
		 .box3{
			position: absolute;
			background-color: #7FFF00;
			top:0px;
			left:833px;
			width:137px;
			height:49px;
		 }
		 .box4{
		 			position: absolute;
		 			background-color: goldenrod;
		 			top:113px;
		 			left:0px;
		 			width:310px;
		 			height:435px;
		 }
		 .box5{
		 			position: absolute;
		 			background-color:cornflowerblue;
		 			top:113px;
		 			left:320px;
		 			width:450px;
		 			height:240px;
		 }
		 .box6{
		 			position: absolute;
		 			background-color: #6495ED;
		 			top:363px;
		 			left:320px;
		 			width:450px;
		 			height:110px;
		 }
		 .box7{
		 			position: absolute;
		 			background-color: #6495ED;
		 			top:483px;
		 			left:320px;
		 			width:450px;
		 			height:30px;
		 }
		 .box8{
		 			position: absolute;
		 			background-color: darkgreen ;
		 			top:523px;
		 			left:320px;
		 			width:650px;
		 			height:25px;
		 }
		 .box9{
		 			position: absolute;
		 			background-color: orchid;
		 			top:113px;
		 			left:780px;
		 			width:190px;
		 			height:400px;
		 }
		 .box10{
		 			position: absolute;
		 			background-color: darkblue ;
		 			top:558px;
		 			left:0px;
		 			width:970px;
		 			height:35px;
		 }
		 
		</style>
	</head>
	<body>
	<div class="box1"></div>	
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"><img src="01.jpg" /></div>
	<div class="box5"></div>
	<div class="box6"></div>
	<div class="box7"></div>
	<div class="box8"></div>
	<div class="box9"></div>
	<div class="box10"></div>
	
	</body>
</html>
  1. 在前一題的基礎上，制作如下頁面：
    CSS頁面布局作業
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.box1{
			position: absolute;
			background-color: crimson;
			top:0px;
			left:0px;
			width:277px;
			height:103px;
		}
		.box1 img{
			width:277px;
			height:103px;
		}
		.box2{
			position: absolute;
			background-color: chartreuse;
			top:57px;
			left:291px;
			width:679px;
			height:46px;
			border-radius:15px;
		}
		.box2 ul
		{
			list-style-type:none;
			margin:0;
			padding:0;
			height:100%;
			overflow:hidden;
			background-color:#004a6c;
			border-radius:15px;
		}
		.box2 ul li{
			float:left;
		  }
	    .box2 li a {
			display: block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		.box2 li a:hover {		
            background-color: #ffaa00;
			}
		.box3{
			position: absolute;
			background-color: #7FFF00;
			top:0px;
			left:833px;
			width:137px;
			height:49px;
		 }
		
		
		 .box4{
		 			position: absolute;
		 			background-color: goldenrod;
		 			top:113px;
		 			left:0px;
		 			width:310px;
		 			height:435px;
		 }
		 .box4 img{
			 width:310px;
			 height:435px;
		 }
		 .box5{
		 			position: absolute;
		 			background-color:cornflowerblue;
		 			top:113px;
		 			left:320px;
		 			width:450px;
		 			height:240px;
		 }
		 .line{
			 width:400px;
			 line-height: 22px;
			 border-bottom:1px dashed #FFFFFF;
		 }
		
		 .box6{
		 			position: absolute;
		 			background-color: #6495ED;
		 			top:363px;
		 			left:320px;
		 			width:450px;
		 			height:110px;
		 }
		 .box7{
		 			position: absolute;
		 			background-color: #6495ED;
		 			top:483px;
		 			left:320px;
		 			width:450px;
		 			height:30px;
		 }
		 .box8{
		 			position: absolute;
		 			background-color: darkgreen ;
		 			top:523px;
		 			left:320px;
		 			width:650px;
		 			height:25px;
		 }
		 .box8 a{
			 font-size: 15px;
			 color: #FFFFFF;
			 text-align: center;
		 }
		 .box9{
		 			position: absolute;
		 			background-color: orchid;
		 			top:113px;
		 			left:780px;
		 			width:190px;
		 			height:400px;
		 }
		 .box9 img{
			 display: block;
			 margin:auto;
			 height: 100px;
			 width: 140px;
		 }
		 .box9 a{
			 color: #485295;
			 text-decoration:none;
			
		 }
		 .box9 p{
			  color: #ffff00;
			  text-shadow:  5px 0px 10px red;
			  font-size: 20px;
			  text-align: center;
			  line-height: 2px;
		 }
		 .mytable{
			 margin:0 auto;
			 height: 30px;
			 width: 130px;
		 }
		 .box10{
		 			position: absolute;
		 			background-color: darkblue ;
		 			top:558px;
		 			left:0px;
		 			width:970px;
		 			height:35px;
		 }
		 .box10 a{
			 line-height:35PX;
			 color: #FFFFFF;
			 font-size: 15px;
		 }
		 
		</style>
	</head>
	<body>
	<div class="box1">
		<img src="images/03.jpg">
	</div>	
	<div class="box2">
		<ul>
			<li><a href="new1">網站欄目1</a></li>
			<li><a href="new2">網站欄目2</a></li>
			<li><a href="new3">網站欄目3</a></li>
			<li><a href="new4">網站欄目4</a></li>
			<li><a href="new5">網站欄目5</a></li>
			<li><a href="new6">網站欄目6</a></li>
		</ul>
	</div>
	<div class="box3">
		<h3 style="text-align: center;">ENGLISH</h3>
		</div>
	<div class="box4">
		<img src="images/01.jpg"> 
	</div>
	<div class="box5">
		<div style="border-bottom: :1px solid #ffafba;">
		<a><b>  I 北大新聞</b></a>
		<a herf="#" style="float:right;">更多>></a><hr>
		</div>
	    <ul>
			<li class="line">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="line">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</li>
			<li class="line">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="line">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="line">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</li>
			<li class="line">嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿</li>
		    <li class="line">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
			<li class="line">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</li>
		</ul>
	</div>
	<div class="box6">
		<a><b>  I 通知公告</b></a>
		<a herf="#" style="float:right;">更多>></a><hr>
		<ul>
			<li class="line">哈哈哈哈哈哈哈哈哈</li>
			<li class="line">哈哈哈哈哈哈哈哈哈</li>
			<li class="line">哈哈哈哈哈哈哈哈哈</li>
		</ul>
	</div>
	<div class="box7">
		<p style="line-height:3px;"><strong>➜ 北大校内資訊</strong>今天有99條新通知</p>
	</div>
	<div class="box8" style="text-align: center;">
		<a class="item"> 校内門戶</a>|
		<a class="item"> 網絡服務</a>|
		<a class="item"> 未名BBS</a>|
		<a class="item"> 書記信箱</a>| 
		<a class="item"> 校長信箱</a>|
		<a class="item"> 北大故事</a>|
		<a class="item"> 相關連結</a>|
		<a class="item"> LSE-PKU</a>|
		<a class="item"> 本站地圖</a>
	</div>
	<div class="box9">
		<a><b>I圖文熱點</b></a><hr>
		<img src="images/02.jpg"> 
		<h4 style="text-align: center; color: #DC143C; line-height:1px;"><b>歡迎新同學</b></h4>
		<h5>北京大學2014年迎新專題網站上線啟用.....</h5>
		<p>群衆意見箱</p>
		<table class="mytable" border="1" cellspacing="0" cellpadding="1" >
			<tr>
				<td><a href="1">院系設定</a></td>
			    <td><a href="2">醫學部</a></td>
			</tr>
			<tr>
				<td><a href="3">管理服務</a></td>
			    <td><a href="4">基金會</a></td>
			</tr>
			<tr>
				<td><a href="5">人才招聘</a></td>
			    <td><a href="6">校友網</a></td>
			</tr>
			<tr>
				<td><a href="7">校園文化</a></td>
			    <td><a href="8">産學研</a></td>
			</tr>
			</table>
			
		<div class="mytext"	>
		<input type="text" value=" " size="15">
		<button type="submit">搜尋</button>
	    </div>
		<style type="text/css">
		.mytext{
			display: flex;
			flex-direction: row;
		    }
		</style>
	</div>
	<div class="box10" style="text-align: center;color: #FFFFFF;" >
	    <a class="item">版權所有·北京大學 </a><span>|</span>
		<a class="item"> 位址:北京市海澱區頤和園路5号 </a>|
		<a class="item"> 郵編:1807 </a>|
		<a class="item"> 郵箱:[email protected].edu.cn </a>| 
		<a class="item"> 門戶網站征集 </a>|
		<a class="item"> 京公安網備11040247号</a>
	</div>
	
	</body>
</html>
  1. 使用javacript制作如下動态表格，要求可以動态添加資料行，可以删除資料行
    CSS頁面布局作業
    代碼如下： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid rgb(45, 43, 201);
            margin:auto;
            width: 500px;
        }
        td,tr{
           text-align: center;
           border:1px solid; 
        }
        div{
            color: skyblue;
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="請輸入編号">
        <input type="text" id="name" placeholder="請輸入姓名">
        <input type="text" id="age" placeholder="請輸入年齡">
        <input type="button" value="添加" id="btnadd">

    </div>
    <table>
        <caption>學生資訊表</caption>
        <tr>
            <td><b>編号</b></td>
            <td><b>姓名</b></td>
            <td><b>年齡</b></td>
            <td><b>操作</b></td>
        </tr>
        <tr>
            <td>1</td>
            <td>張三</td>
            <td>33</td>
            <td><a href="javascript:void(0); "onclick="deltr(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>34</td>
            <td><a href="javascript:void(0); "onclick="deltr(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>25</td>
             <td><a href="javascript:void(0); "onclick="deltr(this)">删除</a></td>
        </tr>
		<tr>
		    <td>4</td>
		    <td>趙六</td>
		    <td>16</td>
		     <td><a href="javascript:void(0); "onclick="deltr(this)">删除</a></td>
		</tr>
		
    </table>
    <script>
        /*
            分析：
            1.添加；
                1.給添加按鈕綁定單擊事件
                2.擷取文本提取内容
                3.建立td 設定td的文本為文本框的内容
                4.建立tr
                5.将td添加到tr中
                6.擷取table，将tr添加到table中
            2.删除：
                1.确定點選的是哪一個超連結
                    <a href="javascript:void(0); " target="_blank" rel="external nofollow"  οnclick="deltr(this)"></a>
                2.删除
                removeChild() 通過父節點删除子節點
        
        */

        //1.擷取按鈕
        var btnadd=document.getElementById("btnadd");
        btnadd.onclick=function(){
            
            //2.擷取文本提取内容
            var id=document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var age=document.getElementById("age").value;

            //3.建立td，指派td的标簽體

            //id的td
            var tdid=document.createElement("td");
            //tdid.appendChild(id); 不會起效果 因為id不是一個節點，是一個文本，是以我們将其轉換為文本節點，傳進去 添加功能才能生效
            tdid.appendChild(document.createTextNode(id));

            //name的td
            var tdname=document.createElement("td");
            tdname.appendChild(document.createTextNode(name));

            //gender的td
            var tdage=document.createElement("td");
            tdage.appendChild(document.createTextNode(age));
            
            //a标簽的td 
            var tddel=document.createElement("td");
            var ele_a=document.createElement("a");
            ele_a.setAttribute("href","javascript:void(0);");
            ele_a.setAttribute("onclick","deltr(this)");
            ele_a.appendChild(document.createTextNode("删除"));//給a添加文本節點
            tddel.appendChild(ele_a);//把建立好的a加入到tddel這個列的子節點中

            //4.建立tr
            var tr=document.createElement("tr");
            //5.添加td到tr中
            tr.appendChild(tdid);
            tr.appendChild(tdname);
            tr.appendChild(tdage);
            tr.appendChild(tddel);
            //6.擷取table，将tr添加到table中
            var table=document.getElementsByTagName("table")[0];
            table.appendChild(tr);
        }

        //删除方法
        function deltr(obj){//形式參數obj（随便定義的）用來接收傳遞的this，this代表目前超連結的對象
            
            //alert(obj);
            var table=obj.parentNode.parentNode.parentNode;
            var tr=obj.parentNode.parentNode;
            table.removeChild(tr);
        }
    </script>
</body>
</html>
css
上一篇: mysql對于不區分字段的大小寫
下一篇: django admin 配置

繼續閱讀