首页 / 知识

Web标准与CSS网页布局实例知识分享

2023-04-11 13:46:00

　　HTML、CSS、JavaScript网页制作从入门到精通

　　1、DIV+CSS布局网页基础

　　1.1一列固定宽度

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>Div+css布局基础</title>

　　</head>

　　<body>

　　<div class="Layer">一列固定宽度</div>

　　</body>

　　<style>

　　。Layer{

　　background-color: #ffcc33;

　　border: 3px solid #ff3399;

　　width: 200px;

　　height: 150px;

　　}

　　</style>

　　</html>

　　访问结果如下，无论怎么改变浏览器，div的高度和宽度都不变。

　　1.2一列自适应

　　当浏览器扩大或者缩小时，其宽度和高度还将维持在浏览器当前宽度比例80%，

　　<style>

　　。Layer{

　　background-color: #ffcc33;

　　border: 3px solid #ff3399;

　　width: 80%;

　　height: 40%;

　　position:absolute;

　　}

　　</style>

　　该部分难点：

　　<div>（定位方式为默认值static）父元素为<body>时width="100%" height="100%"，其高度设置是无效的，

　　如该<div>无内容，仅设置了背景色和边框，则<div>背景颜色和边框也不显示。

　　参考解决方法：

　　1.3两列固定宽度

　　两个div，分为左右两列，

　　Left和right两个div代码，float属性控制css来实现div布局。

　　1.4两列宽度自适应

　　两列自适应，根据百分比实现。

　　<style>

　　。left{

　　background-color: #ffcc33;

　　border: 1px solid #ff3399;

　　width: 65%;

　　height: 250px;

　　float: left;

　　}

　　。right{

　　background-color: #ffcc33;

　　border: 1px solid #ff3399;

　　width: 25%;

　　height: 250px;

　　float: left;

　　}

　　</style>

　　1.5两列右边宽度自适应

　　左边固定宽度，右边不需要设置宽度和浮动。

　　2、使用CSS设计网站导航栏

　　2.1背景变换导航栏菜单

　　导航也是一种列表，使用ul元素以及li元素以及css样式可以实现背景变换的导航菜单。

　　项目源代码，

注意低版本的代码不识别注释，运行需要去掉注释。（<!---aaa->）

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>Div+css布局基础</title>

　　</head>

　　<body>

　　<ul>

　　</ul>

　　</div>

　　</body>

　　<style>

　　#button {

　　width: 150px;

　　border-right:1px solid #000;

　　padding: 0 0 1em 0;

　　margin-top: 1em;

　　font-family: "宋体",

　　font-size: 13px;

　　background-color: #ffcc33;

　　color: #000000;

　　}

　　#button ul {

　　list-style: none;

　　margin: 0;

　　padding: 0;

　　border: none;

　　}

　　#button li {

　　margin: 0;

　　border-bottom-wider: 1px;

　　border-bottom-style: solid;

　　border-bottom-color: #ffff00;

　　}

　　#button li a {

　　display: block;

　　padding:5px 5px 5px 0.5em;

　　background-color: #ff9933;

　　text-decoration: none;

　　width: 100%;

　　border-right-width: 10px;

　　border-left-width: 10px;

　　border-right-style: solid;

　　border-left-style: solid;

　　border-right-color: #ffcc00;

　　border-left-color: #ffcc00;

　　}

　　html>body #button li a {

　　width: auto;

　　}

　　#button li a:hover{

　　background-color:#ffcc00;

　　color: #fff;

　　border-right-width: 10px;

　　border-left-width: 10px;

　　border-right-style: solid;

　　border-left-style: solid;

　　border-right-color: #ff00ff;

　　border-left-color: #ff00ff;

　　}

　　</style>

　　</html>

　　显示结果，如上截图所示。

　　2.2利用css制作横向导航

　　代码基本同上，设置，重在理解div几个参数。

　　2.3利用css设计表单数据，

　　表单是交互式网页经常用到的元素，表单实现数据传输的基础，其作用就是能实现访问者与网站之间的交互功能。

　　改变按钮背景颜色和文字颜色

　　以上代码实现，

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>Div+css布局基础</title>

　　</head>

　　<body>

　　</body>

　　input.tex1{

　　border: 1 solid #99cc00;

　　color: #6600ff;

　　font-size: 10pt;

　　font-style: normal;

　　font-weight: normal;

　　height: 30px;

　　line-height: normal;

　　background-color: #999999;

　　}

　　</style>

　　</html>

　　2.4设计文本框及其文字样式

布局知识分享网页网页布局 DIV+CSS

首页 / 知识

Web标准与CSS网页布局实例知识分享

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢