<iframe id="WWdbUx31-1608352373982" src="https://player.bilibili.com/player.html?aid=373240379" allowfullscreen="true" data-mediaembed="bilibili"></iframe>
網頁制作之下劃線影片

話不多說直接上效果圖吧

商城網頁導航欄部分是有下劃線滑動效果的
本網頁的核心就在于此
代碼都放在下面了
網頁在這里插入圖片描述

好了直接進入到我們的代碼部分
第一個網頁的html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京東商城</title>
    <link rel="stylesheet" href="Demo.css ">
</head>
<body>
  <!-- 第一個黑色部分 -->
    <div id="one">
    <span id="oneTop" onclick="javascript:location.href='注冊頁面'"><img src="../images/user.png"  id="imgOne"/>注冊</span>
</div>
  <!-- 對于導航欄部分的設定 -->
    <div id="tow">
  <img src="../images/logo.png" id="imgTow"/>
  <span id="distance"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
  <ul id="padd">
      <li><a href="https://www.vmall.com/?cid=10074" >個人及家庭產品</a></li>
      <li><a  href="https://www.vmall.com/?cid=10074" >商用產品及方案</a></li>
      <li><a  href="https://www.vmall.com/?cid=10074">服務支持</a></li>
	  <li><a href="https://www.vmall.com/?cid=10074">合作伙伴與開發者</a></li>
	  <li><a href="https://www.vmall.com/?cid=10074">關于華為</a></li>
  </ul>
  
  			<span id="shopping">
				<a href="https://www.vmall.com/?cid=10074" target="_blank">
					<img src="../images/cart.png"  id="imgThree"/>在線購買
				</a></span>
 </div>
   <!-- 第一張大圖 -->
<div>
<a href="https://www.vmall.com/?cid=10074" target="_blank">	
<img src="../images/banner-top.jpg" id="imgFour"/></a>
</div>
<!-- 中間的一段空白間距標簽 -->
   <div id="four" height="168px">推薦資訊 </div>
<br /><br /><br /><br /><br />
<div id="six">
	<span>
		<a  href="https://www.vmall.com/?cid=10074" target="_blank">
			<img src="../images/list1.jpg" id="sixOne"> </a>
		<img src="../images/list2.jpg" id="sixTow"/>
	</span>
	
</div>
        <img src="../images/list3.jpg" id="sixThree">
        <img src="../images/list4.jpg" id="sixFour">
        
<div id="seven">
		<a href="https://www.vmall.com/?cid=10074" target="_blank">
			<img src="../images/banner-bottom.jpg"  id="sevenSeven" width="100%">
		</a>	
			
			<div id="last">
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>華為商城</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>華為云</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>華為智能光伏</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>產品定義社區</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>華為心聲社區</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>聯系我們</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>法律宣告</span></a>
		<a href="https://www.vmall.com/?cid=10074" target="_blank"> <span>隱私保護</span></a>
		</div>
		<img src="../images/help.jpg" id="float">
		</div>
	
      

</body>
</html>

第一個網頁的css代碼部分

/* 對于頂頭黑色背景的裝飾 */
#one{
background-color:black;
     height: 28px;
     width: 100%;
}
/* 對于a標簽 賬戶二字的裝飾設定 */
#oneTop{
    font-size: 12px;
    color: #ccc;
    position: absolute;
    right: 50px;
    line-height: 28px;
    text-decoration-color:#fff ;
}
/* 對于 賬戶二字旁a標簽的顏色設定 */
#A1{
    color: #fff;
    
}
/* 微調user用戶圖示的位置使其美觀 */
#imgOne{
    position: relative;
    top: 5px;
}
/* 設定tow部分的背景顏色以及高度 */
#tow{
background-color: #FFFFFF;
height: 85px;
line-height: 3px;
}
/* 調整logo圖片的位置以及寬度 */
#imgTow{
 width: 150px;
position: relative;
 left: 60px;
}
/* 對于a標簽A2的設定 */
#A2{
	text-decoration: none;
	color: #000000;
}
/* 對于購物文字標簽的設定 */
#shopping{
	position: absolute;
	right: 20px;
	top: 70px;
}
/* 對于購物圖示的微調 */
#imgThree{
	position: relative;
	top: 5px;
	width: 20px;
	height: 20px;
}


/* 對于導航欄下劃線影片裝飾的設定 */
ul,li{
    display:inline-block;
}
a,a:link{
    color:#000;
    text-decoration:none;
    position:relative;
    padding:10px 15px;
}
a:after{
    content: "";
    width: 0;
    height: 3px;
    background: #c7000b;
    position: absolute;
    bottom: 0;
    left: 50%;
    transition: all .2s;
}
a:hover:after,a.active:after{
    left: 0%;
    width: 100%;
}
/* 微調間距 與字體的設定 */
#padd li{
	
	
	padding: 30px;
}




/* 對于第一張大圖片的設定 */
#imgFour{
	width: 100%;
	height: 400px;
}
/* 對于中間的一段間隔的標簽的設定 */
#four{
	width: 168px;
	height: 100%;
	margin: auto;
	font-size: 28px;
	position: relative;
    top: 65px;
}
/* 對于中間一段間隔的標簽的文字的設定 */
#four_word{
	font-size: 28px;
	font-style: inherit;
	color: #333;
	
}

/* 對于第二個插圖部分的大小設定 */
#sixOne{
	height: 330px;
	width: 60%;
	
}
#sixTow{
	height: 330px;
	width: 37%;
	position: absolute;
    right: 40px;
}
#sixThree{
	width: 25%;
	height: 330px;
	
}
#sixFour{
	width: 72%;
	height: 330px;
	
}
#sevenSeven{
	width: 100%;
	height: 400px;
}

#last span{
	padding: 10px;
		color: #666;
		font-size: 14px;
}

/* 對于第7部分的設定 */
#7{
	
	position: absolute;
	top: 0px;
	
}
#seven{
	position: relative;
    top: 80px;
}
/* 對于底部的設定 */
#last{
	height: 50px;
	text-align: center;
	background-color: #f2f2f2;
	line-height: 50px;
}
/* 對于浮動圖示的設定 */

#float{
	width: 40px;
	height: 40px;
	position: fixed;
	bottom: 50px;
	right: 0px;
}

第一個網頁的所有代碼都在上面了，qq2192989511 歡迎提出寶貴的修改意見或與我交流學習
如需圖片材料請在下方留言

接下來第二個網頁代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注冊頁面</title>
		<style type="text/css">
		  /* 對于頂部的設定 */
		  #Top{
			 
			  width: 100%;
			  height: 40px;
			
		  }
			
			#TopOne{
				width:100%;
				height: 70px;

			}
			/* 對于第一段文字的設定 */
			#word{
				position: relative;
				left: 165px;
				top: 50px;
				color: #666;
			}
			/* 對于大表格部分的樣式設計 */
			#tow{
				
				border: 1px solid #BDBDBD;
				width: 80%;
				margin: auto;
			}
			/* 對于輸入框的設定 */
			.input{
				width: 350px;
				height: 30px;
			}
			/* 對于文字的設定 */
			.word{
				font-size: 14px;
				color: #000000;
			}
			/* 對于*樣式的設計 */
			.word1
			{
				font-size: 16px;
				color: #F30;
			}
			/* 對于下拉串列的設定 */
			.option{
				width: 355px;
				height: 30px;
			}
			/* 對于多選框的設定 */
			#chek{
				position: relative;
				left: 150px;
			}
			/* 對于多選框文字的設定 */
			#word2{
				font-size: 14px;
				color: #666666;
			}
			
			/* 對于注冊按鈕的設定 */
			#button{
			width: 101px;
				height: 30px;
			}
			
			/* 對于最后灰色框的設定 */
			#last{
			background-color: #efefef;	
			font-size: 12px;
			color: #666666;
			height: 40px;
			width: 100%;
			position: absolute;
			bottom: 100px;
			line-height: 40px;
			text-align: center;
			left: 60px;
			
			}
		</style>
		
	</head>
	<body>
		
		<!-- 頂部部分 -->
		<div id="Top">
			
			<img src="../images/Top.png" id="TopOne"/> 
		</div>
		
		<h1 id="word"> 注冊新的賬號</h1>
<br /><br />
		<!-- 大表格部分 -->

		<div id="tow">
	<table align="center" cellpadding="0px"  cellspacing="10px">
		<br /><br /><br />
		<tr >
			<td class="word">賬號</td>
			<td><input type="text" class="input" placeholder="請輸入賬號"></td>
			<td class="word1">*</td>
		</tr>
		<tr >
			<td class="word">電子郵箱</td>
			<td><input type="text" class="input"  placeholder="請輸入電子郵箱"></td>
			<td class="word1">*</td>
		</tr>
		<tr >
			<td class="word">密碼</td>
			<td><input type="password" class="input" placeholder="請輸入密碼"></td>
			<td class="word1">*</td>
		</tr>
		
		<tr> 
		  <td>國家/地區</td>
		  <td>
		<select class="option">
			<option value="0" class="option">---中國大陸---</option>
			<option value="1" class="option">---中國臺灣---</option>
			<option value="2" class="option">---中國香港---</option>
			<option value="3" class="option">---中國澳門---</option>
			<option value="4" class="option">---外國用戶---</option>
		</select>
		</td>
		<td class="word1">*</td>
		</tr>
		
		<tr>
			<td>&nbsp;</td>
			<td id="word2"> <input type="checkbox" >我已閱讀并同意華為公司的用戶注冊協議和隱私宣告</td>
		</tr>
		<tr>&nbsp;</tr>
		<tr>&nbsp;</tr>
		
		<tr>
			<td>&nbsp;</td>
			<td align="center"><input type="button" value="注冊" id="button"></td>
		</tr>
		
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td >&nbsp</td>
		</tr>
		
		<span id="last">
	 Uniportal是華為公司對外提供身份認證的唯一入口，在使用華為公司的其他對外服務時，您的Uniportal帳號和登錄資訊會被共享，
		</span>
		
	</table>
			
			
			
		</div>
	</body>
</html>

如代碼寫的太粗糙希望大家對我指正改進

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/237670.html

標籤：其他

上一篇：CSS3簡單特效--animation實作流光按鈕

下一篇：Show me the code系列之IntelliJ IDEA 2020.3 新特性

使用HTML與CSS制作一個簡易的華為商城頁面和注冊頁面

<iframe id="WWdbUx31-1608352373982" src="https://player.bilibili.com/player.html?aid=373240379" allowfullscreen="true" data-mediaembed="bilibili"></iframe> 網頁制作之下劃線影片

話不多說直接上效果圖吧

<iframe id="WWdbUx31-1608352373982" src="https://player.bilibili.com/player.html?aid=373240379" allowfullscreen="true" data-mediaembed="bilibili"></iframe>
網頁制作之下劃線影片