关于棋牌游戏网站建设文案,网站动态交互,宁波seo排名优化培训,wordpress 修改版本号目录
一、两列布局
1、前言#xff1a;
2. 两列布局的常见用法 两列布局的元素示例#xff1a;
代码运行后如下#xff1a;
二、三列布局
1.前言
2. 三列布局的常见用法
三列布局的元素示例#xff1a;
代码运行后如下#xff1a;
三、多行多列
1.前言
2
2. 两列布局的常见用法 两列布局的元素示例
代码运行后如下
二、三列布局
1.前言
2. 三列布局的常见用法
三列布局的元素示例
代码运行后如下
三、多行多列
1.前言
2多行多列布局的常见用法 多行多列布局的元素示例
四、百分比布局
代码运行后如下
五、综合练习
代码运行后如下 # 实现两列布局有多种方法这里我会介绍几种常见的技术包括浮动、Flexbox和Grid布局。# 一、两列布局
1、前言 两列布局都有固定的长度从内容上区分主要内容和侧边栏。页面布局整体上分为上、中、下3个部分即header区域、container区域和footer区域。 container又包含mainBox主要内容区域和sideBox区域侧边栏 2. 两列布局的常见用法 两列布局的元素示例
!DOCTYPE html
html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title典型的网页结构示例:带横向导航栏/title stylenav ul{height:30px; /*给父盒设置高度避免高度塌陷影响其他兄弟盒*/background-color: aquamarine;}nav ul li{margin-right: 20px;float:left;}#contact{width: 220px;height: 160px;background-color: pink;border: 2px black solid;position: fixed;left:1200px;top:450px;}main{width: 1604px;}aside{ width: 35%;height: 450PX;background-color: green;float: right;}article{/* width:100% */width: 65%;height: 450px;background-color: gray;float: left;}footer{width: 1600px;height: 50px;background-color:blue;/* float: left; */border: 2px black solid;}/style
/head body header h1 aligncenter广东云浮中医药职业学院/h1 p aligncenter欢迎来到: ins计算机学院/ins/p hr nav ul typenone lia href#首页/a/li lia href#关于我们/a/li lia href#学生风采/a/li lia href#联系方式/a/li /ul /nav /header hr main section article h3文章标题/h3 p这里是文章的内容简介。br可以使用br标签进行换行。/p brbrbrimg src./img_src/云中医校徽.jpg alt文章配图 width200 height200 p想了解广东云浮中医药职业学院a hrefhttps://gdyfvccm.edu.cn/点击这里/a/p /article aside h3侧边栏/h3 p侧边栏内容如快速链接、广告等。/p table border1 tr th专业/th th链接/th /tr tr td计算机应用技术/td tda href专业A详情页.html专业A详情/a/td /tr tr td数字媒体技术/td tda href专业B详情页.html专业B详情/a/td /tr /table /aside /section section idcontact h4联系我们/h4 form 姓名:input typetext idname namenamebr 邮箱:input typeemail idemail nameemailbr input typesubmit value提交 /form /section div styleclear: both;/div/main footer p版权所有 copy; 2024 广东云浮中医药职业学院计算机学院/p /footer /body /html 代码运行后如下 二、三列布局
1.前言 三列布局由3个独立的而成仅比两列布局多了一项内容最终是基于两列布局结构演变出来。页面布局整体上分为上、中、下3个部分即header区域、container区域和footer区域。 container又包含mainBox主要内容区域、SubsideBox次要内容区、sideBox区域侧边栏 2. 三列布局的常见用法 三列布局的元素示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylesection{width: 1600px;height: 1000px;}#div1{width: 15%;height: 800px;background-color: rgb(224, 169, 41);float: left;}#div2{width: 23%;height: 800px;background-color: rgb(26, 114, 237);float: right;}#div3{width: 60%;height: 800px;background-color:rgb(186, 239, 71);margin-left: 16%;margin-right: 15%;float: none;}/style
/head
bodysectiondiv iddiv1盒子1/divdiv iddiv2盒子2/divdiv iddiv3盒子3/div/section /body
/html
代码运行后如下 三、多行多列
1.前言 多行多列常见于页面主要内容区域使用将页面内容分成多行和多列的方式排列。常用于float元素设置floatleft 、 floatright,使元素向左移向右移。 2多行多列布局的常见用法 多行多列布局的元素示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylesection{width: 90%;height: 50%;border: 4px black solid;background-color: gray;position: absolute;}div{width: 15%;height: 100px;background-color: aqua;border: 5px solid #000;margin-bottom: 5px;float: left;margin-right: 2%;margin-top: 2%;}/style
/head
bodysection classclass_ele div iddiv1盒子1/divdiv iddiv2盒子2/divdiv iddiv3盒子3/divdiv iddiv4盒子4/divdiv iddiv5盒子5/divdiv iddiv1盒子6/divdiv iddiv2盒子7/divdiv iddiv3盒子8/divdiv iddiv4盒子9/divdiv iddiv5盒子10/div/section !-- footer网页页脚/footer --/body
/html
代码运行后如下 四、百分比布局 在自适应网页设计中常见百分比布局同个页面可以根据屏幕大小自动调整内容布局。百分比用法例如 width100% 、height : 100 !DOCTYPE html
html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title网页布局综合练习/title style #div1{background-image: url(./top.jpg);background-size: 100%;height: 150PX;}#img1{position: relative;top: 20px;left: 100px;}#b{position: relative;left: 350px;bottom: 50%;}#img2{position: relative;left: 200px ;bottom: 20px;}/style/head body header section classcontainer1div iddiv1img id img1 src./logo.png alt width650PX height150PXb idb计算机学院/b img idimg2 src./logo2.png alt/div/section/header nav /navmainsection/section/main footer/footer
/body /html
代码运行后如下 五、综合练习
1、综合练习案例分析 综合练习包含了三列布局多行多列布局的结合。 !DOCTYPE html
html langzh head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title网页布局综合练习/title style #div1{background-image: url(./top.jpg);background-size: 100%;height: 150PX;}#img1{position: relative;top: 20px;left: 100px;}#b{position: relative;left: 350px;bottom: 50%;}#img2{position: relative;left: 200px ;bottom: 20px;}#div2{position: relative;}nav ul{height:30px;background-color:rgb(21, 67, 21);} nav ul li{margin-right: 20px;float:left;}.clear_ele a:link{color: rgb(189, 232, 232);}.clear_ele a:visited{color: azure;}#aside-left{float: left;width: 20%;height: 850px;background-color: rgb(30, 163, 30);} #aside-right{float: right;width: 20%;height: 850px;background-color:rgb(30, 163, 30) ;} article{width: 60%;height: 850Px;background-color: gray;float: left;}.clear_ele img{list-style: none;width: 20%;height: 200px;border: 2px solid red;margin-right: 2%;margin-bottom: 2%;}.container3{width: 220px;height: 160px;background-color: pink;border: 2px black solid;position: fixed;right:235px;bottom: 10%;} footer{width: 100%;height: 50px;background-color:rgb(78, 209, 78);float: left;}/style/head body header section classcontainer1div iddiv1img id img1 src./logo.png alt width650PX height150PXb idb计算机学院/b img idimg2 src./logo2.png alt/div/section/header nav ul classclear_ele lia hrefhttps://gdyfvccm.edu.cn/学校首页/a/li lia href#学院概况/a/li lia href#机构设置/a/li lia href#院系专业/a/li lia href#教学科研/a/li lia href#信息公开/a/li lia href#招生就业/a/li/ul /nav main section classcontainer2 clear_ele aside idaside-left 学院新闻/asideaside idaside-right 友情链接/aside article文章 ul classclear_ele brbrbrbrbrbrbrimg src./photo2.jpg altimg src./photo2.jpg altimg src./photo2.jpg altimg src./photo2.jpg altimg src./photo2.jpg altimg src./photo2.jpg altimg src./photo2.jpg altimg src./photo2.jpg alt/ul/article /section section classcontainer3 h4联系我们/h4 form 姓名:input typetext idname namenamebr 邮箱:input typeemail idemail nameemailbr input typesubmit value提交 /form /section /main footer p版权所有 copy; 2024 广东云浮中医药职业学院计算机学院/p /footer /body /html
代码运行后如下 总结:CSS样式的使用可以让代码更加简洁和结构化使站点的访问和维护更加容易。
