[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

网页标题：三列自适应宽度

网页标题：多行三列自适应宽度

一级水平导航菜单：采用“无序列表+超链接”设计

纵向导航菜单

总结

前言

两日一更，今天也是准时报到的一天，喵~

网页标题：三列自适应宽度

  • 网页的主体部分代码自行完善
  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style6.css 
    @charset "utf-8";
/* CSS Document */
*{padding:0px;margin:0px;}
#left{width:30%;height:700px;background:#223344;float:left;}
#center{width:50%;height:700px;background:#553344; float:left;}
#right{width:20%;height:700px;background:#993344; float:left;}
  • 自行完成样式设置（提示：自适应宽度用%为单位即可）
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/style6.css" type="text/css">
  <title>三列模式布局</title>
 </head>
 <body>
  <div id="left" class="">left</div>
	<div id="center" class="">center</div>
	<div id="right" class="">right</div>
 </body>
</html>

  • 网页标题：多行三列自适应宽度

  • 网页的主体部分代码自行完善
  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style7.css
  • *{font-size: 16px;margin: 0 auto;padding: 0;}
#container{background: #334455;width: 100%;height: 700px;}
#header{background: #FF4455;width: 100%;height: 150px;}
#logo{background: #FFDD55;width: 100%;height: 100px;}
#nav{background: #FFDD99;width: 100%;height: 50px;}
#main{background: #33DD55;width: 100%;height: 500px;}
#left{background: #33FBFB;width: 33%;height: 100%;float: left;}
#left_up_1{background: #334455;width: 100%;height: 125px;}
#left_up_2{background: #445566;width: 100%;height: 125px;}
#left_down_1{background: #556677;width: 100%;height: 125px;}
#left_down_2{background: #667788;width: 100%;height: 125px;}
#center{background: #88FBFB;width: 34%;height: 100%;float: left;}
#center_up{background: #66ff66;width: 100%;height: 200px;}
#center_down{background: #44DD22;width:100%;height:300px;}
#right{background: #DDFBFB;width: 33%;height: 100%;float: left;}
#right_up{background: #55DDFB;width: 100%;height: 150px;}
#right_down{background: #667733;width:100%;height: 350px;}
#footer{background: #DDDD11;width: 100%;height: 50px;clear: both;}

    自行完成样式设置（提示：自适应宽度用%为单位即可）

<!-- edu_10_1_5.html -->
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>多行三列模式布局</title>
   <link rel="stylesheet" href="css/style7.css" type="text/css">
 </head>
 <body>
 <div id="container" class="">
    <div id="header" class="">
		  <div id="logo" class="">logo</div>		  
		  <div id="nav" class="">nav</div>			
    </div>
		<div id="main" class="">
      <div id="left" class="">
        <div id="left_up_1" class="">left_up_1</div>
        <div id="left_up_2" class="">left_up_2</div>
        <div id="left_down_1" class="">left_down_1</div>
        <div id="left_down_2" class="">left_down_2</div>
			</div>
		  <div id="center" class="">
        <div id="center_up" class="">center_up</div>
        <div id="center_down" class="">center_down</div>
			</div>
		  <div id="right" class="">
			 <div id="right_up" class="">right_up</div>
        <div id="right_down" class="">right_down</div>
			</div>			
		</div>
		<div id="footer" class="">footer</div>	
 </div>  
 </body>
</html>

一级水平导航菜单：采用“无序列表+超链接”设计

  • 网页标题：一级水平导航菜单
  • 网页的主体部分代码为：

<div id="nav">

         <ul>

             <li><a href="#">首页</a></li>

        <li><a href="#">jQuery特效</a></li>

        <li><a href="#">JavaScript特效</a></li>

        <li><a href="#">Flash特效</a></li>

        <li><a href="#">div+css教程</a></li>

                <li><a href="#">HTML5教程</a></li>

    </ul>

</div>

  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style8.css
  • @charset "utf-8";
/* CSS Document */
ul{
	margin:0;
	padding:0;
}

ul li{
	height:30px;
	width:115px;
	list-style-type:none;
	float:left;
	font:0.9em Arial, Helvetica, sans-serif;
	text-align:center;
	/*display:inline;*/
}

ul li a{
	color:#fff;
	width:113px;
	margin:0px;
	padding:0 0 0 8px;
	display:inline-block; /*display:block;*/
	background:#808080;
	line-height:29px;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	text-decoration:none;
}
ul li a:hover{
	background-color:#666;
	border-bottom:1px dashed #ff0000;
}
  • 并设置如下样式：
    • 设置ul的样式：内外边距均为0
    • 设置ul下li的样式为：高30px，宽115px，不显示项目符号，向左浮动，字体大小0.9em，字体为Arial系列字体，文本居中对齐。
    • 设置ul li下a的样式为：字体颜色为白色，宽113px，行高29px，修改元素显示类型为inline-block，背景颜色为#808080，外边距为0，左内边距为8px，其余内边距均为0，设置右和下边框线为1px 实线 #ccc，取消下划线。
    • 设置ul li下鼠标悬停时超链接a的样式为：背景颜色#666，下边框线1px 虚线 #ff0000。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一级水平导航菜单</title>
<link rel="stylesheet" href="css/style8.css"
</head>

<body>
<div id="nav">
	<ul>
    	<li><a href="#">首页</a></li>
        <li><a href="#">jQuery特效</a></li>
        <li><a href="#">JavaScript特效</a></li>
        <li><a href="#">Flash特效</a></li>
        <li><a href="#">div+css教程</a></li>
 		<li><a href="#">HTML5教程</a></li>
    </ul>
</div>
</body>
</html>

纵向导航菜单

  • 网页标题：纵向导航菜单
  • 网页的主体部分代码为：

<div id="nav">

         <ul>

             <li><a href="#">首页</a></li>

        <li><a href="#">jQuery特效</a></li>

        <li><a href="#">JavaScript特效</a></li>

        <li><a href="#">Flash特效</a></li>

        <li><a href="#">div+css教程</a></li>

                <li><a href="#">HTML5教程</a></li>

    </ul>

</div>

  • 使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style9.css
  • @charset "utf-8";
/* CSS Document */
#nav{
	width:200px;
	font:0.9em Arial, Helvetica, sans-serif;
}

#nav ul{
	padding:0;
	margin:0;
	list-style-type:none;
}
#nav ul li{
	border-bottom:1px solid #ed9f9f;
}
#nav ul li a{
	display:block;
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;
	border-right:1px solid #711515;
}

#nav ul li a:link,#nav ul li a:visited{
	background-color:#c11136;
	color:#fff;
}

#nav ul li a:hover{
	background-color:#990020;
	color:#ff0;
}

  • 并设置如下样式：
    • #nav的样式:宽200px，字体为Arial系列
    • #nav下ul标签的样式：取消列表项标志，内外边距均为0
    • #nav下li的样式：下边框线1px 实线 #ed9f9f
    • #nav下li中a标签的样式：显示为块级元素，上右下内边距为5px，左内边距为0.5em，无下划线，左边框线12px 实线 #711515，右边框线1px实线 #711515
    • #nav下li中未访问过的超链接以及已访问过的超链接样式：背景颜色为#c11136，字体颜色#fff。
    • #nav下li中鼠标悬停时的超链接样式：背景颜色#990020，字体颜色#ff0

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纵向导航菜单</title>
<link rel="stylesheet" href="CSS/style9.css">
</head>

<body>
<div id="nav">
	<ul>
    	<li><a href="#">首页</a></li>
        <li><a href="#">jQuery特效</a></li>
        <li><a href="#">JavaScript特效</a></li>
        <li><a href="#">Flash特效</a></li>
        <li><a href="#">div+css教程</a></li>
 		<li><a href="#">HTML5教程</a></li>
    </ul>
</div>
</body>
</html>

总结

可以自己写写，挺好玩的！需要材料包的佬佬，欢迎来私信本喵！

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/322382.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

ArcGIS Pro中怎么加载在线地图

ArcGIS Pro中怎么加载在线地图

当我们在制图的时候&#xff0c;有的时候需要加载在线地图&#xff0c;在ArcGIS Pro中加载在线地图的方式有很多&#xff0c;这里为大家介绍一下加载的方法&#xff0c;希望能对你有所帮助。 加载底图 在菜单栏上选择地图&#xff0c;点击底图&#xff0c;可以看到所有可加载…
阅读更多...
【PyQt小知识 - 7】：QLineEdit设置输入的文本以圆点或星号等方式显示

【PyQt小知识 - 7】：QLineEdit设置输入的文本以圆点或星号等方式显示

文章目录 setEchoMode setEchoMode 在PyQt中&#xff0c;QLineEdit是一种用于接收用户输入的小部件&#xff08;widget&#xff09;。setEchoMode是QLineEdit类中的一个方法&#xff0c;可以用于设置文本输入框中的文本显示模式。它接受一个参数来指定要使用的模式。 setEcho…
阅读更多...
「JavaSE」类和对象2

「JavaSE」类和对象2

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;快来卷Java啦 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 类和对象2 &#x1f349;匿名对象&#x1f349;关键字static&#x1f34c;static修饰成员变量&#x1f34c;static修饰成员方法&…
阅读更多...
JavaScript switch case语句

JavaScript switch case语句

JS switch case 语句与 if else 语句的多分支结构类似&#xff0c;都可以根据不同的条件来执行不同的代码&#xff1b;但是与 if else 多分支结构相比&#xff0c;switch case 语句更加简洁和紧凑&#xff0c;执行效率更高。 JavaScript switch case 语句的语法格式如下&#…
阅读更多...
认识SpringBoot中的条件注解

认识SpringBoot中的条件注解

✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉 🍎个人主页：Leo的博客 💞当前专栏： 循序渐进学SpringBoot ✨特色专栏： MySQL学习 🥭本文内容：认识SpringBoot中的条件注解 📚个人知识库： Leo知识库，欢迎大家访问 1.前…
阅读更多...
实人认证（人像三要素）API：加强用户身份验证

实人认证（人像三要素）API：加强用户身份验证

前言 在当今数字化时代&#xff0c;随着互联网应用的广泛普及&#xff0c;用户身份验证的重要性日益凸显。实人认证&#xff08;人像三要素&#xff09;API作为一种新型的身份验证方式&#xff0c;凭借其高效、安全和便捷的特性&#xff0c;正在成为加强用户身份验证的强大工具…
阅读更多...
微调您的Embedding模型以最大限度地提高RAG管道中的相关性检索

微调您的Embedding模型以最大限度地提高RAG管道中的相关性检索

英文原文地址&#xff1a;https://betterprogramming.pub/fine-tuning-your-embedding-model-to-maximize-relevance-retrieval-in-rag-pipeline-2ea3fa231149 微调您的Embedding模型以最大限度地提高RAG管道中的相关性检索 微调嵌入前后的 NVIDIA SEC 10-K 文件分析 2023 年…
阅读更多...
护眼灯有蓝光吗？防蓝光护眼台灯推荐

护眼灯有蓝光吗？防蓝光护眼台灯推荐

护眼台灯是家长为孩子购买的常见用品之一&#xff0c;但对于它的了解却不够深入&#xff0c;很多人购买之后反而容易出现眼睛疲劳、不适的情况&#xff01;据了解&#xff0c;主要的原因是因为在选择护眼台灯时&#xff0c;大多数人没有专业知识&#xff0c;没有买到合适的护眼…
阅读更多...
Web3与环保：区块链如何推动可持续发展

Web3与环保：区块链如何推动可持续发展

随着气候变化和环境问题日益严峻&#xff0c;社会对可持续发展的需求变得愈发迫切。在这个背景下&#xff0c;Web3技术和区块链崭露头角&#xff0c;成为推动可持续发展的关键力量。本文将深入探讨Web3技术如何与环保理念相结合&#xff0c;引领我们迈向更加可持续的未来。 1. …
阅读更多...
统计学习 复习（知识点+习题）

统计学习 复习（知识点+习题）

复习资料&#xff1a;https://github.com/RuijieZhu94/StatisticalLearning_USTC 第一章 线性回归 1. From one to two 最小二乘 课后题 有偏/无偏估计 加权最小二乘 2. Regularization 线性回归&#xff08;二维情况&#xff09; 求解有约束优化问题 正则化最小加权二乘…
阅读更多...
博客摘录「 性能优化：__builtin_expect详解」2024年1月15日

博客摘录「 性能优化：__builtin_expect详解」2024年1月15日

性能优化&#xff1a;__builtin_expect详解___builtin_expect对性能的影响-CSDN博客https://blog.csdn.net/chudongfang2015/article/details/75710848 #define LIKELY(x) __builtin_expect(!!(x), 1) __builtin_expect宏定义中为何写成!!(x)&#xff1f; 首先__buildin_expec…
阅读更多...
遥测终端机选择要点：功能、稳定性与成本的综合考量

遥测终端机选择要点：功能、稳定性与成本的综合考量

在当今的智能化时代&#xff0c;遥测终端机作为数据采集、传输和处理的关键设备&#xff0c;广泛应用于水利、气象、环保等领域。然而&#xff0c;面对市场上琳琅满目的遥测终端机产品&#xff0c;如何选择一款性能优良、稳定性高且成本合理的设备成为摆在用户面前的一大难题。…
阅读更多...
实战演练：利用XSS漏洞执行CSRF攻击

实战演练：利用XSS漏洞执行CSRF攻击

1. 选择目标站点 为了方便举例&#xff0c;这里我们选择portswigger默认搭建好的实验室环境。 PS&#xff1a;其他站点类似操作即可。 1.1 实验环境介绍 该实验室在博客评论功能中包含存储的XSS漏洞。要解决实验室问题&#xff0c;可利用该漏洞执行CSRF攻击&#xff0c;并更…
阅读更多...
项目乱、管控难？低代码CRM+助力广告行业数字化运营

项目乱、管控难？低代码CRM+助力广告行业数字化运营

广告行业涉及的是多环节、多角色、把控难的复杂项目&#xff0c;传统的广告行业普遍存在客户资源分散、项目协同难、账目不清晰、数据信息滞后等问题。 基于广告行业场景痛点&#xff0c;道一云结合七巧低代码开发平台&#xff0c;打造了广告行业CRM解决方案&#xff0c;围绕销…
阅读更多...
机器学习中的线性回归

机器学习中的线性回归

线性回归 概念 利用 回归方程(函数) 对 一个或多个自变量(特征值)和因变量(目标值)之间 关系进行建模的一种分析方式。 分类 一元线性回归&#xff1a;y wx b 目标值只与一个因变量有关系 多元线性回归&#xff1a; y w_1x_1 w_2x_2 w_3x_3 … b 目标值只与多个…
阅读更多...
什么是WhatsApp Business？WhatsApp和WhatsApp Business区别？

什么是WhatsApp Business？WhatsApp和WhatsApp Business区别？

什么是WhatsApp Business&#xff1f; WhatsApp Business账号是Meta专为企业设计的WhatsApp账号。不同于消费者层次的应用&#xff0c;WhatsApp Business旨在为企业提供更好的服务支持&#xff0c;方便企业与消费者建立更好的双向沟通渠道。 WhatsApp和WhatsApp Business有什…
阅读更多...
Vulnhub靶机：Deathnote

Vulnhub靶机：Deathnote

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;Deathnote&#xff08;10.0.2.16&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entry/dea…
阅读更多...
【Golang】go编程语言适合哪些项目开发?

【Golang】go编程语言适合哪些项目开发?

文章目录 **前言****Go 编程语言适合哪些项目开发&#xff1f;****1. 网络编程项目&#xff1a;****2. 大数据处理项目&#xff1a;****3. 云计算项目&#xff1a;****4. Web开发项目&#xff1a;****5. 嵌入式系统项目&#xff1a;****6.API开发**:**1. 并发性能&#xff1a;*…
阅读更多...
数字孪生+人工智能突破复杂地形和气候提供可靠的电力

数字孪生+人工智能突破复杂地形和气候提供可靠的电力

利用 Bentley 应用程序实现数字化交付&#xff0c;大大缩短了项目时间和成本&#xff0c;降低了碳排放量 Kalpataru Projects International Limited (KPIL) 正在扩展喀麦隆的电力网络&#xff0c;以改善该国 13% 人口的电网连接和电力供应。根据其项目管理方法&#xff0c;KPI…
阅读更多...
11-适配器模式（Adapter）

11-适配器模式（Adapter）

意图 将一个类的接口转换成客户希望的另一个接口。Adapter模式使得原本由于接口不兼容而不能在一起工作的那些类可以一起工作。 适配器模式属于结构模式。 类适配器模式&#xff08;通过继承的方式实现适配器模式&#xff09; Adapter类&#xff0c;通过继承src类&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023