第一题博客

最新推荐文章于 2024-10-04 22:03:04 发布

2401_85136737

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量218

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2401_85136737/article/details/139866052

版权

CSS盒子模型是一个重要的概念，用于描述网页中元素的外观和布局。每个HTML元素都可以看作是一个盒子，由内容、内边距、边框和外边距四个部分组成。

内容（Content）：这是盒子模型的核心部分，包含了文本、图片等元素的实际内容。元素的宽度和高度属性用于定义内容区域的大小。
内边距（Padding）：位于内容和边框之间的空间，用于控制内容与边框之间的间隔。可以通过padding属性来设置内边距的大小。
边框（Border）：围绕在内边距和内容外部的线条，用于分隔元素。border属性可以用来设置边框的样式、宽度和颜色。
外边距（Margin）：位于边框外部的空间，用于控制盒子与其他盒子之间的间隔。margin属性用于设置外边距的大小。

第二题

<!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>
        *{
            margin:0;
            padding: 0;
        }
        a{text-decoration: none;}
        ul,ol
        {
            list-style: none;
        margin-left: 20px;
            list-style-image:url(img/point.jpg);
        }
        nav.menu{
                     width: 100%;
                    height: 50px;
                    background-color: #5fbdef;
                    color: white;
                            text-align: center;
                            line-height: 50px;
        }
        a:link {color: #FF0000}		/* 未访问的链接 */
        a:visited {color: #00FF00}	/* 已访问的链接 */
        a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
        a:active {color: #0000FF}
        
        .box{
            
            width:200px;
            height:40px;
            text-align: center;
            line-height: 40px;
            background-color: #22be53;
            color: white;
            margin: auto; 
        }
    </style>
</head>
<body>
    <nav class="menu">
		<ul>
			<li><h1>QQ登录</h1>
			</li>
			</ul>
		</nav>
		<br>
				<div style="text-align:center; > 
					<p style="height:40px; font-size:15px; line-height:28px;" >推荐使用快速安全登录,防止盗号。</p >
					<br>
				</div>
			
					<div style="text-align:center; > 
				    <form method="get" action="#" id="myform">
					<input type="text" name="账号"  style="width:200px; height:30px; font-size:15px;"  placeholder="支持QQ号/邮箱/手机号登录" >
					<br><br>
					<input type="password" name="密码" style="width:200px; height:30px; font-size:15px;margin: auto; " placeholder="密码">
					</form>
				</div>
<br><br>
		<div class="box" style="text-align:center; >
		
			授权登录
			</div>
		
		
					<br><br>
				<div style="text-align:center; >
					
					
					忘了密码?
					
					新账号
					
					意见反馈
					<br>
				
				</div>
				<div style="text-align:center; >
					<p style="height:28px; font-size:12px; line-height:28px;" >将获得以下权限:</p >
					<br>
					<input type="checkbox" name="" checked="checked">全选<br>
					<input type="checkbox" name="" checked="checked">获得您的昵称、头像、性别
					<td><br><br>
					<p style="height:28px; font-size:12px; line-height:28px;" >腾讯网将获得以下权限:</p >
					</div>

</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
		<style type="text/css">
		* {
		    padding: 0px;
		    margin: 0px;
			/* 去除编号 */
		    list-style: none;
		}
		img{
			width: 250px;
			height: 250px;
		}
		
		td{
			font-size: 20px;
			font-weight: 40px;
			width: 200px;
			text-align: center;
		}
		.nav {
		    height: 50px;
		    background: black;
		}
		
		.nav>li {
		    color: white;
		    float: left;
			/* 文字垂直剧中  只要行高和高度一致 */
		    line-height: 50px;
		    padding: 0px 30px;
		    position: relative;
		}
		
		
		li {
		    position: relative;
		    text-align: center;
		}
		
		.nav>li:hover {
		    background: blue;
		}
		
		.nav ul {
		    background: green;
		    width: 100px;
		    position: absolute;
		    left: 0px;
		    opacity: 0;
		    transform: rotate(0deg) scale(.5);
		    transition: .2s;
		}
		
		li li:hover {
		    background: yellow;
		}
		
		.nav>li:hover ul {
		    opacity: 1;
		    transform: rotate(360deg) scale(1);
		}
		
		li::after {
		    content: "";
		    position: absolute;
		    width: 0;
		    height: 5px;
		    background: pink;
		    bottom: 10px;
		    left: 50%;
		    transform: translate(-50%, 0);
		    transition: 1s;
		}
		
		li:hover::after {
		    width: 80%;
			body {
				font-size: 12px;
				line-height: 25px;
			}
 
			table {
				border-top: solid 1px #666666;
				border-left: solid 1px #666666;
			}
 
			td {
				text-align: center;
				border-right: solid 1px #666666;
				border-bottom: solid 1px #666666;
			}
 
			.left {
				text-align: left;
				padding-left: 10px;
			}
 
			#photo {
				border: solid 1px #0066CC;
				width: 200px;
				text-align: center;
				z-index: 2;
				position: absolute;
				display: none;
				top: 50px;
				left: 50px;
				background-color: #ffffff;
			}
 
			#big {
 
				width: 200px;
			}
 
			h1 {
				/* transform: translate(45%); */
				text-align: center;
			}
 
			table {
				margin: 0 auto;
				width: 100%;
				border: 2px solid #aaa;
				border-collapse: collapse;
			}
 
			table th,
			table td {
				border: 2px solid #aaa;
				padding: 5px;
			}
 
			th {
				background-color: #eee;
			}
			.id{
				font-size: 10px;
			}
		</style>
	</head>
	<body>
 
         <ul class="nav">
             <li>个人中心 </li>
             <li>首页</li>
         </ul> 
      
		<table style="width: 100%;" cellspacing="0" cellpadding="0" >
			<tr>
				<td>商品图片</td>
				<td>商品名称</td>
				<td >商品价格</td>
				<td>操作</td>
		 </tr>
		 <tr>
		 	<td>
		 		
		 	</td>
		 	<td class="left">飞鸟集</td>
		 	<td class="sum">26.00元</td>
		 	<td align="center">
		 		<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
		 	</td>
		 </tr>
			<tr>
		 	<td >
				
				</td>
				<td class="left">月亮与六便士</td>
				<td class="sum">26.80元</td>
				<td>
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
			<tr>
				<td>
					
				</td>
				<td class="left">小王子</td>
				<td class="sum">32.80元</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
			<tr>
				<td>
					
				</td>
				<td class="left">新月集</td>
				<td class="sum">44.00元</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
		 <tr>
		 	<td>
		 		
		 	</td>
		 	<td class="left">茶馆/我这一辈子</td>
		 	<td class="sum">67.40元</td>
		 	<td align="center">
		 		<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
		 	</td>
		 </tr>
			<tr>
				<td>
					
				</td>
				<td class="left">呼啸山庄</td>
				<td class="sum">38.00元</td>
				<td align="center">
					<input type="button" value="加入购物车" onclick="add_shoppingcart(this)" />
				</td>
			</tr>
		</table>
		<div id="photo" onmouseout="hidden()" onmousemove="shows()"></div>
 
		<h1>购物车</h1>
		<table  id="a">
			<thead>
				<tr>
					<th>商品</th>
					<th>单价（元）</th>
					<th>数量</th>
					<th>金额（元）</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody id="goods">
			</tbody>
			<tfoot>
				<tr>
					<td colspan="3" align="right">总计</td>
					<td id="total"></td>
					<td><button onclick="tk(this)">购买</button></td>
				</tr>
			</tfoot>
			
		</table>
		
 
		<script>
			//第一个表格
			function show(image, event) {
				var x;
				var y;
				document.getElementById("photo").style.display = "block";
				x = parseInt(event.clientX) + parseInt(document.documentElement.scrollLeft);
				y = parseInt(event.clientY) + parseInt(document.documentElement.scrollTop);
				document.getElementById("photo").style.top = y + "px";
				document.getElementById("photo").style.left = x + "px";
				document.getElementById("big").src = "images/" + image;
 
			}
 
			function shows() {
				document.getElementById("photo").style.display = "block";
			}
 
			function hidden() {
				document.getElementById("photo").style.display = "none";
			}
			window.onscroll = "show()";
 
			//------------------------------------------------------------------------------------------------				
			var map = new Map(); 
 
			function add_shoppingcart(btn) { 
				
				var ntr = document.createElement("tr");
				
				var tr = btn.parentNode.parentNode; 
				var tds = tr.children;
				
				var name = tds[0].innerHTML;
				
				var price = tds[2].innerHTML;
				console.log("name:" + name + ",price:" + price);
 
				
				if (map.has(name)) {
					
					var tr1 = map.get(name);
					
					       
					var btn1 = tr1.getElementsByTagName("button")[1];
					
					jia(btn1);
				} else {
					
					ntr.innerHTML =
						`
						<td style="text-align:center;">${name}</td>
						 <td style="text-align:center;">${price}</td>
						<td style="text-align:center;">
						<button onclick="jian(this)">-</button>
						<input type="text" value="1" size="1" />
						<button id="btn1" onclick="jia(this)">+</button>
						</td>
						<td>${price}</td>
						<td style="text-align:center;"><button onclick="del(this)">X</buttton></td>`;
 
					
					map.set(name, ntr);
					
					var tbody = document.getElementById("goods");
					
					tbody.appendChild(ntr);
					sum();
				}
			}
 
			function del(btn) {
				var tr = btn.parentNode.parentNode;
				tr.remove(); 
				var tr = btn.parentNode.parentNode; 
				var tds = tr.children;
				
				var name = tds[1].innerHTML;
				map.delete(name); 
				sum();
			}
 
			function jian(btn) {
				var inpt = btn.nextElementSibling;
				var amount = inpt.value;
				if (amount <= 1) {
					return;
				} else {
					inpt.value = --amount;
					var trs = btn.parentNode.parentNode;
					console.log(trs);
					var price = parseInt(trs.children[1].innerHTML);
					trs.children[3].innerHTML = price * amount;
					sum();
				}
			}
 
			function jia(btn) { 
				
				var inpt = btn.previousElementSibling;
				
				var amount = inpt.value;
				
				inpt.value = ++amount; 
				var td = btn.parentNode.previousElementSibling;
				
				var price = parseInt(td.innerHTML); 
				
				var rtd = btn.parentNode.nextElementSibling;
				rtd.innerHTML = price * amount;
				sum();
			}
 
			
			function sum() {
				
				var tbody = document.getElementById("goods");
				var trs = tbody.children; 
				var total = 0; 
				for (i = 0; i < trs.length; i++) { 
					var price = trs[i].children[3].innerHTML;
					total = total + parseInt(price);
				}
				var t = document.getElementById("total");
				
				t.innerHTML = total;
			}
			
			function tk(btn){
         
		 
			}
			</script>
	</body>