html css 头部底部标签网站整体架构布局要求

小白未央

已于 2024-07-25 17:04:07 修改

阅读量212

点赞数 9

分类专栏： css专区文章标签： html css 前端

于 2024-07-25 17:02:12 首次发布

本文链接：https://blog.csdn.net/qq_34548883/article/details/140694329

版权

css专区专栏收录该内容

4 篇文章 1 订阅

订阅专栏

html css 网站整体架构布局基本要求

html的根标签(元素),网页中的所有内容都要写根元素的里边<!–head是网页的头部,head中的内容不会在网页中直接出现,主要用于帮助浏览器或者搜索引擎来解析网页，css一定都是定义在head中。

网站头部header

要创建一个简单的HTML网站头部，你可以使用以下HTML和CSS代码。这里是一个示例，展示了如何制作一个包含logo、导航链接和搜索框的头部。

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="styles.css">
</head>
<body>
<header>
    <div class="container">
        <div class="logo">
            <a href="/">网站Logo</a>
        </div>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于我们</a></li>
                <li><a href="/services">服务</a></li>
                <li><a href="/contact">联系我们</a></li>
            </ul>
        </nav>
        <div class="search">
            <input type="text" placeholder="搜索...">
        </div>
    </div>
</header>
<!-- 网站的其余内容 -->
</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}
 
header {
    background-color: #f5f5f5;
    padding: 30px;
}
 
.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
.logo a {
    color: #333;
    text-decoration: none;
}
 
nav ul {
    display: flex;
    list-style-type: none;
}
 
nav li {
    margin-right: 20px;
}
 
nav li a {
    color: #333;
    text-decoration: none;
}
 
.search input {
    border: 1px solid #ddd;
    padding: 10px;
    margin-left: 20px;
}

/* 可根据需要添加更多样式 */

网站底部

底部小视角链接添加（—字体颜色随着底部版权信息的颜色一致，将a标签添加到版权信息的旁边

	<div class="footer">
					
			<div class="foot_btm_nav">
				<a href="./index.html">用户协议</a>
				<a href="./Quick_search_car.html">隐私协议</a>
				<a href="./Car_valuation.html">首页</a>
				<a href="./Industry_information.html">排行榜</a>
				<!-- <a href="./policies.html">加盟商</a> -->
				<a href="./contact.html">联系我们</a>
			</div>
			<div class="foot_btm_copy">
				<p>Copyright©2019-2024  All Rights Reserved<a href="http://beian.miit.gov.cn" target="_blank">鲁ICP1号-1</a>
				</p>
				<!-- <p>本站由。。。提供技术支持</p> -->
			</div>
	</div>

.footer {
	background-color: #121212;
	padding: 20px 0;
	text-align: center;
	margin: 0 auto;
}


.foot_btm_nav {
	margin-bottom: 4px;
}
.foot_btm_nav a{
	color: #666;
	padding: 0 3px;
}

.foot_btm_copy p {
	color: #666;
	line-height: 24px;
}

.foot_btm_copy a {
	color: #666;
	margin-left: 10px;
}

在这里插入图片描述

前端轮播图动画 animate.css 使用工具前端规范明说

史上最全CSS命名规则总结及公用常见的CSS前端整理小知识

小白未央

关注

9
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html css 头部底部标签网站整体架构布局要求

要创建一个简单的HTML网站头部，你可以使用以下HTML和CSS代码。这里是一个示例，展示了如何制作一个包含logo、导航链接和搜索框的头部。html css 头部底部标签网站整体架构布局要求
复制链接

扫一扫