html+css：利用盒子模型与浮动定位完成简单纵向网页

最新推荐文章于 2025-01-08 11:30:51 发布

信璎

最新推荐文章于 2025-01-08 11:30:51 发布

阅读量1.2k

点赞数 3

分类专栏：网站设计文章标签： html css3 定位 css html5

本文链接：https://blog.youkuaiyun.com/qq_51373497/article/details/109490119

版权

网站设计专栏收录该内容

1 篇文章

订阅专栏

先展示一下成品效果

在这里插入图片描述

看前注意（若只看网页代码可跳过）：

要明白盒子（border）中内边距（padding）与外边距（margin），从而引出用法
border：20px solid red /盒子模型的边框 none无、solid单实线、dashed虚线、dotted点线、double双实线/
width：200px； /盒子模型的宽度/
height：50px /盒子模型的高度/
background：#ccc /盒子模型的背景颜色/

{padding/margin：属性值;}
padding-top：上内边距
padding-right：右内边距
padding-tleft：左内边距
padding-bottom：下内边距

margin-top：上外边距
margin-right：右外边距
margin-tleft：左外边距
margin-bottom：下外边距

float（元素的浮动属性）
{float：属性值}
left：左浮动
right：右浮动
none：不浮动

清除浮动：
{clear：属性值;}
left：清除左浮动
right：清除右浮动
both：同时清除左右浮动

元素的定位属性
{position：属性值;}
static ：静态定位（默认定位方式）
relative ：相对定位，相对于其原文档流位置进行定位
absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
fixed：固定定位，相对于浏览器窗口进行定位

left：左侧偏移量，定义元素相对于其父元素的距离
right：右侧偏移量，定义元素相对于其父元素的距离
top：顶端偏移量，定义元素相对于其父元素的距离
bottom：底部偏移量，定义元素相对于其父元素的距离

代码正文

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#px{font-family:Arial, Helvetica, sans-serif; font-size:38px;
font-weight:100px;
background:url(subtitle.jpg) repeat;
color:#FFF;
padding:50px;
padding-left:15px;
padding-top:15px;

}
ul,li{
	margin:0;padding:0;
	list-style:none;
	font-family:Arial, Helvetica, sans-serif; font-size:22px;}
	
a{color:#000; text-decoration:none; 
display:block;padding: 8px;}/*使访问的时候整个边框内的颜色改变*/

a:hover{
color:#FFF; background:#0162af;}
#menu ul li{display:block;width:255px;
border:1px solid #ccc;
position:relative;}

#menu ul li ul{
	position:absolute; left:254px;top:0;width:100px; display:none;}

#menu ul li:hover ul{display:block;}
body {
	margin-top: 150px;
	}
span{
	float:right;
	padding-right:5px;
	}
</style>
</head>

<body>

<div id="menu">
    <ul>
         <li><div id="px">关于我们</div>
        <li><a href="#">公司简介  <span>></span> </a></li>
    <li><a href="#">发展大事记<span>></span></a></li>
        <li><a href="#">企业荣誉 <span>></span> </a></li>
        <li><a href="#">企业文化     <span> ></span></a>
            <ul>
            <li><a href="#">企业愿景</a></li>
            <li><a href="#">经营理念</a></li>
            </ul>
         </li>
        <li><a href="#">厂容厂貌    <span>></span></a></li>
    </ul>
</body>
</html>