web网页首页布局

小冷4332

已于 2024-01-11 08:36:19 修改

阅读量510

点赞数 11

分类专栏：网页开发html/css/JQuery 文章标签：前端 html5 css

于 2024-01-11 01:39:25 首次发布

山山4332

本文链接：https://blog.csdn.net/qq_64064356/article/details/135516491

版权

网页开发html/css/JQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细描述了使用HTML和CSS构建的网页，包括导航栏的设计，下拉菜单的实现，以及页面主体部分的布局。展示了如何使用CSS控制样式和布局，以适应不同设备的屏幕尺寸。

摘要由CSDN通过智能技术生成

效果展示：

html代码：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<link type="text/css" rel="stylesheet" href="css/1.css" >
    <script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="heada">
<!-- 导航条 -->
    <div class="nav">
        <!-- 导航栏 -->
        <ul>
            <!-- 导航项 -->
            <li class="navItem">
            	<a href="#here">个人空间站</a>
                <!--<ul class="self">
                    <li class="pfp"><img src="pictures/myself.gif" width="50%"></li>
                </ul>-->
                <ul class="dropList">
                    <li class="dropItem"><a href="#here">主页</a></li>
                    <li class="dropItem"><a href="#here">发展历程</a></li>
                    <li class="dropItem"><a href="#here">演讲力训练专家</a></li>
                </ul>
            </li>
            <li class="navItem">
                <a href="#here">所有人可见</a>
                <!-- 下拉菜单 -->
                <ul class="dropList">
                    <li class="dropItem"><a href="#here">张嘴就来”寄托的三个愿望</a></li>
                    <li class="dropItem"><a href="#here">发展历程</a></li>
                    <li class="dropItem"><a href="#here">演讲力训练专家</a></li>
                </ul>
            </li>
            <li class="navItem">
                <a href="#here">输入暗号可见</a>
                <!-- 下拉菜单 -->
                <ul class="dropList">
                    <li class="dropItem"><a href="#here">职场精英演讲力训练营</a></li>
                    <li class="dropItem"><a href="#here">总裁演讲力训练营</a></li>
                    <li class="dropItem"><a href="#here">青少年演讲力训练营</a></li>
                    <li class="dropItem"><a href="#here">演讲专题</a></li>
                </ul>
            </li>
            <li class="navItem">
                <a href="#here">仅自己可</a>
                 <!-- 下拉菜单 -->
                 <ul class="dropList">
                    <li class="dropItem"><a href="#here">口才树”理论体系</a></li>
                    <li class="dropItem"><a href="#here">演讲一阳指”模板</a></li>
                    <li class="dropItem"><a href="#here">三子”教育演讲体系</a></li>
                </ul>
            </li>
            <li class="navItem">
                <a href="#here">群聊</a>
                <!-- 下拉菜单 -->
                <ul class="dropList">
                    <li class="dropItem"><a href="#here">线上一对一辅导</a></li>
               		<li class="dropItem"><a href="#here">课后一对一辅导</a></li>
                </ul>
            </li>
            <li class="navItem">
                <a href="#here">文件管理</a>
                <!-- 下拉菜单 -->
                <ul class="dropList">
                    
                    <li class="dropItem"><a href="#here">14年只专注于演讲力训练</a></li>
                    <li class="dropItem"><a href="#here">演讲力训练总裁班</a></li>
                    <li class="dropItem"><a href="#here">成功人士的演讲班</a></li>
                </ul>
            </li>            
        </ul>
	</div> 
</div> 
<!-- 右边商标 -->
	<div class="register">
    	<input type="image"  class="ahead-image" src="images/搜索.png" width="25">
        <input type="text" class="tex"/>     
    	<input type="image"  class="ahead-image" src="images/网页设计.png" width="25">         
    	<input type="image"  class="ahead-image" src="images/发布.png" width="25">
<a href="../右上标/登录界面/登陆界面.html"><input type="image"  class="ahead-image" src="images/注册头像.png" width="25">
        <input type="image"  class="ahead-image" src="images/vip.png" width="25">
    	<input type="image"  class="ahead-image" src="images/好友.png" width="25">
    	<input type="image"  class="ahead-image" src="images/3.1-消息.png" width="25">
    	<input type="image"  class="ahead-image" src="images/设置.png" width="26">
        <input type="image"  class="ahead-image" src="images/皮肤.png" width="25">
        <input type="image"  class="ahead-image" src="images/分享.png" width="25">
    </div>
<div id="main">
    <img class="c" src="images/umbrella.jpg" width="1300px" height="250px"/>
</div>
</body>
</html>

css代码：

@charset "utf-8";
/* CSS Document */
	*{
		margin:0 auto;
		padding:0;
		text-decoration:none;
	}
	
	body{
		background: url(../images/1.jpg);
		background-repeat: no-repeat;
		background-size: 100%;
	}
	#heada{
		width: 100%;
		position: absolute;
		top: 0;
}
	.nav li a{
		color: #000;
		font-size: 18px;
		}
	.nav ul{width: 1700px;}	
	.nav li{	
		color: #FFF;
		padding: 7px 10px;
		list-style: none;
		z-index: 999;
		}
	.nav{
		width: 100%;
		height: 39px;
		text-align: center;			
		background-color: #1f78dd;	
		background-color: rgba(255, 255, 255, 0.5);		
	}
	.navItem{	
		float: left;
		width: 0 auto;
		display: block;
	}
	.navItem:hover{
		background-color: #f1f0f5;
		color: #FFF;
	}
	.dropList{
		background-color:#f2f2f2;
		clear: both;
		text-align:left;
		position: absolute;
		top:38px;
		border:1px solid #000;
		border-radius:5px;
		display: none;
		width: 260px !important;
	}
	.dropItem a{color:#1e60b6;}
	.dropItem {
		margin:0px;
		position:static;
		z-index:999;
		border-bottom:1px solid #000;
		padding:5px 10px;
		color:#FFF;
		}
	.dropItem:hover{
		background-color:#eb7f0a;
		color: white;		
	}
	.navItem:hover .dropList{
		display:block;
	}
	
	.register{
		float:right;
		position:relative;
		top:5px;
		z-index:99px;
		padding:0 15px;
		}
	.ahead-image{padding:0 5px;}
/* self */	
	.self{
		background-color:#f2f2f2;
		clear: both;
		text-align:left;
		position: absolute;
		top:41px;
		border:1px solid #000;
		border-radius:5px;
		display: none;
		width: 260px !important;
	}
	.php a{color:#1e60b6;}
	.php {
		margin:0px;
		position:static;
		z-index:999;
		border-bottom:1px solid #000;
		padding:5px 0px;
		color:#FFF;
		}
	.php:hover{
		background-color:#eb7f0a;
		color: white;		
	}
	.self,.self img{
		display:block;
	}
/* main */
	#main{
		width:1300px;
		height:100vh;
		position: relative;
		top:40px;
		z-index:-11;
		background-color: rgba(255, 255, 255, 0.5)
		}
	.c{
		position:relative;
		bottom:33px;}
	.tex{
		height:20px;
		position:relative;
		bottom:5px;
		border-style:none;
		}