网页布局与CSS技巧-优快云博客

本文详细介绍了HTML与CSS的基本使用，包括网页结构搭建、样式设置、响应式布局等，通过实例解析了如何创建美观且功能丰富的网站头部导航，涵盖了logo展示、导航菜单、搜索框及个人中心的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*样式*/
		/*css初始化*/
		* {
			margin: 0;
			padding: 0;   /*清除内外边距*/
		}
		ul {
			list-style: none;  /*去掉列表样式小点*/
		}
		.clearfix:before, .clearfix:after {     /*清除浮动*/
			display: table; 
			content: ""; 
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom:1;
		}
		a {
			color: #050505;
			text-decoration: none;    /*取消下划线*/	
		}
		input {
			border: 0; /*所有的表单边框为0*/
			box-sizing: border-box; /*css盒子模型 border 和 padding 都包含到 width 里面去*/  /*对我来说重点记！！！*/
		}
		body {
			background-color: #f3f5f7;   /*整个页面的背景色*/
		} 
        header {
        	height: 100px;
        	/*background-color: skyblue;*/
        	overflow: hidden;   /*解决内外边距和并（塌陷）问题*/
        	border-bottom: 5px solid purple;
        } 
        nav {
        	width: 1366px;   /*宽度暂且定为1366*/
        	height: 42px;
        	/*background-color: purple;*/
        	margin: 26px auto;  /* 盒子水平居中对齐 */

        }
        .logo {
        	float: left;
        }
        .navbar {
        	float: left;
        	height: 42px;
        	line-height: 42px;   /*这个行高给父亲，行高会继承*/
        	margin-left: 50px;
        }
        .navbar ul li {
        	float: left;   /*让首页 课程这个一行显示*/
        	/*line-height: 42px;   父亲给过了所以儿子这个不用写了*/
        }
        .navbar li a {   /*行内元素尽量不要给上下的padding值，给左右即可*/
        	padding:  0 10px;  /*上下为0，左右为8*/
        	
        	display: block;   /*a是行内元素，给高需要转换块级*/
        	height: 42px;      /*高度有了之后会垂直继承*/
        }
        .navbar li a:hover {
        	border-bottom: 2px solid #00a4ff;  /*鼠标放入有底边框*/ 		
        }   
        /*搜索框部分*/
        .search {
        	width: 415px;   /* 360+50*/
        	height: 38px;
        	border: 1px solid #f3f5f7;
        	/*margin-left: 0 10px 0 100px;   自己瞎添的*/
        	float: right;
        }
        .search input[type=text] {   /*属性选择器 type为text的文本框*/
			
			width: 341px;
			height: 35px;
			padding-left: 20px;	
			float: left;
        }  
        .search input[type=submit] {/*属性选择器 type 为 submit 的文本框*/
        	width: 50px;
        	height: 38px;        	
        	float: left;
        	background: #00a4ff url(1.png) center center no-repeat;
        }
        /*搜结*/
        /*个开*/
        .personal {
        	float: right;
        	height: 42px;
        	line-height: 42px; /* 这个行高给父亲，行高会继承*/
        	margin: 0 15px 0 35px;   /*上0 右15 下0 左35*/
        }
        .personal img {
        	margin: 0 8px;
        }
        /*个人中心结束*/
        /*banner start*/
        .banner {
        	height: 420px;
        	background-color: #1c036c;
        }

        /*banner end*/
	</style>
</head>
<body>
	<!-- 结构 -->
	<!-- 页面头部分 -->
    <header>
    	<nav>
    		<!-- logo部分 -->
    		<div class="logo"> 
    			<img src="E:\ccccccccccccccccc\wyr\图片\images\logo.png" alt="">
    		</div> 
    		<!-- 导航栏部分 -->
    		<div class="navbar">
    			<ul>
    				<li><a href="#">首页</a></li>    <!-- 无法给宽否者长宽不一，所以给左右padding值 -->
    				<li><a href="#">课程</a></li>
    				<li><a href="#">职业规划</a></li>
    			</ul>
    		</div>
    		<!-- 搜索框部分 -->
    		<div class="search">
    			<form action="">   <!-- 为了方便选择器选择 加from action="" -->
    				<input type="text" name="" placeholder="输入关键词">
    				<!-- placeholder占位符 内容输入自动清除默认值 -->
    				<input type="submit" value="">
    			</form>
    		</div>
    		<!-- 个人中心 -->
    		<div class="personal">
    			<a href="#">个人中心<img src="2.gif"></a>
    			<a href="#"><img src="3.png">领域</a>
    		</div>
    	</nav>
    </header>
    <!-- banner部分 -->
	<div class="banner"></div>
</body>
</html>