html布局_css三栏布局

html布局_css三栏布局编写程序实现如下图效果:实现代码如下:

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

编写程序实现如下图效果:

html布局_css三栏布局

 

实现代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>网页布局及注册表</title> <style type="text/css"> *{ margin: 0; /*整体去除外边距*/ padding: 0; /*整体去除内边距*/ } .header{ width: 80%; /* 头部宽度为整个网页80% */ height: 60px; /* 头部高为60像素 */ background-color: #e6adf4; /* 头部底色为#e6adf4 */ } .header h1{ text-align: center; /* 头部中的h1标签居中显示 */ } .nav{ width: 80%; /* 导航栏宽度为整个网页80% */ height: 36px; /* 导航栏高度为36像素 */ background-color: #e4beed; /* 导航栏底色为#e4beed */ line-height: 36px; } .nav ul{ margin-left: 30%; /* 导航栏下的ul标签与左侧距离为导航栏宽度的30% */ } .nav li{ float: left; /* 导航栏下的li标签整体向左浮动 */ list-style: none; /*去掉导航栏下的li标签前的小圆点*/ margin-left: 100px; /*导航栏下的li标签与其左侧标签的距离为100像素 */ } .nav >ul >li >ul{ display: none; /* 隐藏所有li标签*/ position: absolute; background-color: #ededed; color: #333; } .nav >ul <li:hover >ul{ display: block; /* 点击导航栏下的第一级li时显示隐藏的第二级li标签内容,行内元素变块元素*/ } .article{ width: 80%; /* 主体内容宽度为整个网页80% */ height: 600px; /* 主体内容高度为600像素 */ } .aside{ width: 20%; /* 左侧菜单栏宽度为主体内容宽度的20%*/ height: 600px; /* 左侧菜单栏高度为600像素*/ float:left; /* 左侧菜单栏整体向左浮动,达到使右边内容栏与左侧菜单栏同在一行的目的*/ background-color: #c4abca; /* 左侧菜单栏的底色为#c4abca */ } .aside ul{ margin-top: 20%; /* 左侧菜单栏下的ul标签距离左侧菜单栏顶部的距离为菜单栏高度的20%*/ margin-left: 30%;/* 左侧菜单栏下的ul标签距离左侧菜单栏左边的距离为菜单栏宽度度的30%*/ } .aside li{ list-style: none; margin-top: 50px; /*左侧菜单栏下的li标签与其上部标签的距离为50像素 */ } .section{ width: 80%; /* 右侧内容宽度为主体内容宽度的80%*/ height: 600px; /* 右侧内容栏高度为600像素 */ float:right; /* 右侧菜单栏整体向右浮动,达到使右边内容栏与左侧菜单栏同在一行的目的*/ background-color: #d5aedf; /* 右侧内容栏*/ } .section p:first-child{ color: red; /* 右边内容下的第一个p标签字体为红色,该优先级低于nth-child(2n+1),故显示绿色*/ font-size: 20px; /* 右边内容下的第一个p标签字体大小为20像素 */ } .section p:nth-child(2n){ color: blue; /* 右边内容下的第2n个p标签字体为蓝色*/ } .section p:nth-child(2n+1){ color: green; /* 右边内容下的第2n+1个p标签字体为绿色*/ } .footer{ width: 80%; /* 底部宽度为网页宽度的80% */ height: 36px; /* 底部高度为36像素 */ background-color: #d7bdde; /* 底部颜色为#d7bdde */ text-align: center; /* 底部内容整体居中显示 */ } .footer span{ margin-left: 50px; /* 底部下的span标签与其左侧标签的距离为50像素*/ color: #2f2f2f; /* 底部下的span标签的字体颜色为#2f2f2f */ font-size: 20px; /* 底部下的span标签的字体大小为20像素 */ } </style> </head> <body> <!--头部--> <div class="header"> <h1>HTML+CSS+JS</h1> </div> <!--导航栏--> <div class="nav"> <ul> <li> <p>HTML</p> <ul> <li>属性</li> <li>元素</li> <li>注释</li> </ul> </li> <li> <p>CSS</p> <ul> <li>样式</li> <li>注解</li> </ul> </li> <li> <p>JS</p> <ul> <li>注解</li> </ul> </li> </ul> </div> <!--主体内容--> <div class="article"> <!--左侧菜单栏--> <div class="aside"> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> </div> <!--右侧内容--> <div class="section"> <p>行内元素(label)</p> <p>作用:点缀网页,填充内容</p> <p>特性:</p> <p>1) 与其他行内元素共享一行空间</p> <p>2) 默认宽高由内容决定</p> <p>3) 不能为其指定宽和高</p> <p>4) 行内元素中不可以嵌套块元素</p> <p>但块元素中可以嵌套行内元素</p> </div> </div> <!--底部--> <div class="footer"> <span>软件工程</span> <span>web方向</span> <span>lidy</span> </div> </body> </html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168299.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • fedora14安装教程_ubuntu安装后配置

    fedora14安装教程_ubuntu安装后配置1、root账号登陆打开系统工具-终端输入命令:su-输入root密码(此时密码不显示,直接输入)输入命令:gedit/etc/pam.d/gdm在文本编辑器中注释掉”authrequiredpam_succeed_if.souser!=rootquiet”这一行(在这一行前面加上”#”,即改成#authrequiredpam_succeed_if.so

  • 机器学习常见的采样方法[通俗易懂]

    机器学习常见的采样方法[通俗易懂]我们在训练模型的过程,都会经常进行数据采样,为了就是让我们的模型可以更好的去学习数据的特征,从而让效果更佳。但这是比较浅层的理解,更本质上,数据采样就是对随机现象的模拟,根据给定的概率分布从而模拟一个

  • SqlCommand.ExecuteReader 方法

    SqlCommand.ExecuteReader 方法SqlCommand.ExecuteReader方法将CommandText发送到Connection并生成一个SqlDataReader。重载列表名称说明SqlCommand.ExecuteReader()…

  • clipper使用

    clipper使用一、clipper使用的redis库说明enumRedisDBTable{REDIS_STATE_DB_NUM=1,REDIS_MODEL_DB_NUM=2,REDIS_CONTAINER_DB_NUM=3,REDIS_RESOURCE_DB_NUM=4,REDIS_APPLICATION_DB_NUM=5,REDIS_METADATA_DB_NUM=6,//usedtostoreClipperconfigurationmetadat

    2022年10月22日
  • 如何使用adb命令安装apk到电视上[通俗易懂]

    如何使用adb命令安装apk到电视上[通俗易懂]使用此命令之前,先确定你的电视已打开adb调试服务如何打开请参考:TCLMS平台电视如何实现adb连接从而安装第三方应用程序需要用到的软件Windows下,选择”开始”-&amp;gt;运行-&amp;gt;cmd,进入命令行模式;进入adb的目录,如adb在D盘adbtools文件夹中,则:d:cdadbtools如果嫌麻烦,可以在adb目录中右击|在此处直接打开命令窗口输…

  • HttpCanary下载_用java编写自我介绍

    HttpCanary下载_用java编写自我介绍前言首先,我们无论学习哪个框架,都要带着问题,带着思考去学习思考1:HttpRunner是什么?思考2:HttpRunner的设计模式是什么?思考3:为什么我们要学习HttpRunner?他的

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号