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

news2024/10/6 18:31:10

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

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

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

目录

前言

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

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

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

纵向导航菜单

总结

前言

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

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

  • 网页的主体部分代码自行完善
  • 使用外部样式表为其设置样式，在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>

总结

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

多商户入驻系统APP源码系统：功能强大+分销+秒杀+拼团+砍价+优惠券+完整的安装代码包以及搭建教程

多商户入驻系统APP源码系统：功能强大+分销+秒杀+拼团+砍价+优惠券+完整的安装代码包以及搭建教程

科技的不断发展&#xff0c;互联网在不断的进步&#xff0c;传统的商业形态正在逐步向数字化转型。在这个大背景下&#xff0c;多商户入驻系统APP源码系统应运而生&#xff0c;旨在为各类商家提供一个功能强大的线上商业平台&#xff0c;以提升其市场竞争力。该系统集成了丰富的…
阅读更多...
Linux：NTP校时、PTP校时

Linux：NTP校时、PTP校时

目录 前言一、NTP校时1、简介2、ubuntu使用 NTP3、嵌入式设备使用 NTP 校时4、NTP 服务器的校时精度 二、PTP校时1、简介2、ubuntu使用 PTP3、嵌入式设备使用 PTP 校时 三、PTP 校时和 NTP 校时那个精度高一些 前言 在进行网络协议通信时&#xff0c;我们有时候需要计算通信的延…
阅读更多...
【面试合集】说说提高微信小程序的应用速度的手段有哪些？

【面试合集】说说提高微信小程序的应用速度的手段有哪些？

面试官&#xff1a;说说提高微信小程序的应用速度的手段有哪些&#xff1f; 一、是什么 小程序启动会常常遇到如下图场景&#xff1a; 这是因为&#xff0c;小程序首次启动前&#xff0c;微信会在小程序启动前为小程序准备好通用的运行环境&#xff0c;如运行中的线程和一些基…
阅读更多...
Spring集成

Spring集成

目录 概述1 声朋一个简单的集成流1.1 使用XML定义集成流1.2 使用Java配置集成流1.3 使用Spring lntegration 的 DSL 配置 2 Spring integration 功能概览2.1 消息通道2.2 过滤器2.3 转换器2.4 路由器2.5 切分器2.6 服务激活器2.7 网关2.8 通道适配器2.9 端点模块 概述 就像我们…
阅读更多...
图像识别与计算机视觉有什么区别？

图像识别与计算机视觉有什么区别？

图像识别和计算机视觉在很多方面存在差异&#xff0c;这些差异主要体现在以下几个方面&#xff1a; 1. 研究范围 图像识别是计算机视觉领域的一个子集。计算机视觉不仅包括图像识别&#xff0c;还涵盖了更广泛的内容&#xff0c;如场景理解、目标跟踪、分割、识别和解释等。简而…
阅读更多...
说清楚Kubernetes、Docker、Dockershim、Containerd、runC、CRI、OCI的关系

说清楚Kubernetes、Docker、Dockershim、Containerd、runC、CRI、OCI的关系

Kubernetes v1.20版本 的 release note 里说 deprecated docker。并且在后续版本 v1.24 正式删除了 dockershim 组件&#xff0c;这对我们有什么影响呢&#xff1f;Kubernetes 1.20: The Raddest Release | Kubernetes 为了搞明白这件事情&#xff0c;以及理解一系列容器名词 …
阅读更多...
DC电源模块与AC电源模块的对比分析

DC电源模块与AC电源模块的对比分析

DC电源模块与AC电源模块的对比分析 BOSHIDA DC电源模块和AC电源模块是两种常见的电源模块&#xff0c;它们在供电方式、稳定性、适用范围等方面有所不同&#xff0c;下面是它们的对比分析&#xff1a; 1. 供电方式&#xff1a; DC电源模块通过直流电源供电&#xff0c;通常使用…
阅读更多...
Java里解压zip和rar包

Java里解压zip和rar包

zip的解压提供了一种方法&#xff0c; rar的解压提供了两种方法&#xff0c;第一种方法是调用命令调用主机安装的解压缩工具&#xff0c; 第二种方法&#xff0c;需要注意一下&#xff0c;需要导一个包 <dependency><groupId>com.github.junrar</groupId>&l…
阅读更多...
NR C-DRX inactivity Timer的工作原理

NR C-DRX inactivity Timer的工作原理

drx-inactivityTimer 是C-DRX中比较关键的一个timer&#xff0c;这里是其工作流程的总结。 inactivity-timer是UE等待成功解码PDCCH的持续时间&#xff0c;从PDCCH的最后一次成功解码开启&#xff0c;timer超时后UE可以返回sleep。 UE 应在一次成功解码PDCCH 后重新启动inactiv…
阅读更多...
优优嗨聚集团：债务逾期，如何应对与解决？

优优嗨聚集团：债务逾期，如何应对与解决？

在现代社会&#xff0c;债务问题已成为越来越多人面临的难题。债务逾期不仅会给个人带来巨大的经济压力&#xff0c;还会影响个人信用记录&#xff0c;甚至可能引发法律纠纷。那么&#xff0c;当债务逾期时&#xff0c;我们应该如何应对与解决呢&#xff1f; 一、了解债务情况 …
阅读更多...
数据库——DAY1（Linux上安装MySQL8.0.35（网络仓库安装））

数据库——DAY1（Linux上安装MySQL8.0.35（网络仓库安装））

一、环境部署 1、Red Hat Enterprise Linux 9.3 64 位 2、删除之前安装过本地镜像版本的MySQL软件&#xff08;以前未安装过&#xff0c;请跳过此步骤&#xff09; [rootlocalhost ~]# dnf remove mysql-server -y [rootlocalhost ~]# rm -rf /var/lib/mysql [rootlocalhost …
阅读更多...
带你了解烧结钕铁硼的成型工艺

带你了解烧结钕铁硼的成型工艺

与传统的粉末冶金工艺相比&#xff0c;钕铁硼的成型具有磁场取向和氧化防护这两大特点&#xff0c;成型过程基本决定了磁体的几何形状、尺寸和取向度&#xff0c;是烧结钕铁硼制备的关键环节&#xff0c;成型一般分为干压和湿压两大类。 图片来源&#xff1a;曹帅&#xff0c;烧…
阅读更多...
梦回2004！我用全志V3s做了个成本100元，功能媲美MP4的随身终端

梦回2004！我用全志V3s做了个成本100元，功能媲美MP4的随身终端

本项目是基于全志V3S的随身终端&#xff08;类似MP4&#xff09;&#xff0c;命名为V3S-PI&#xff0c;开发板使用四层板制作&#xff0c;全板采用0603电容电阻&#xff0c;相较于0402&#xff0c;制作更为方便&#xff0c;同时成本可压缩至100以内。 项目简介 开发板选用全志…
阅读更多...
Linux多网卡绑定实现负载均衡详解

Linux多网卡绑定实现负载均衡详解

将多块网卡绑定同一IP地址对外提供服务&#xff0c;可以实现高可用或者负载均衡。直接给两块网卡设置同一IP地址是不可以的。通过 bonding&#xff0c;虚拟一块网卡对外提供连接&#xff0c;物理网卡的被修改为相同的MAC地址。 目录 1、bond的作用 2、Bonding聚合链路工作模…
阅读更多...
pyqt5 pyinstaller 打包 QThread QLable QscrollArea 滑动 红果短剧

pyqt5 pyinstaller 打包 QThread QLable QscrollArea 滑动 红果短剧

废话 不多说&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; UI.py self.scrollArea QtWidgets.QScrollArea(self.centralwidget)self.scrollArea.setGeometry(QtCore.QRect(20, 130, 541, 511))self.scrollArea.setWidgetResizable(True)self.scrollArea.setOb…
阅读更多...
idea2018导入多个javaweb项目-学习笔记

idea2018导入多个javaweb项目-学习笔记

多个javaweb项目导入 file-> Project Structure 确认&#xff0c;test项目的依赖jar包&#xff0c;引入tomcat jar包。 到此导入javaweb并配置完成 </article>
阅读更多...
延迟减少10倍！OCD：基于以目标为中心Diffusion的高效视频编辑方法

延迟减少10倍！OCD：基于以目标为中心Diffusion的高效视频编辑方法

基于扩散的视频编辑已经取得了令人瞩目的质量&#xff0c;可以根据文本编辑提示转换给定视频输入的全局风格、局部结构和属性。然而&#xff0c;这类解决方案通常需要大量的内存和计算成本来生成时间上连贯的帧&#xff0c;无论是以扩散反演还是跨帧注意力的形式。在本文中&…
阅读更多...
MtimeMtimecmp

MtimeMtimecmp

Mtime: 实时time计数器&#xff0c;可读可写&#xff1b;mtime必须按照一个固定的频率递增&#xff1b;如果count overflow了&#xff0c;则mtime的值需要卷绕&#xff1b;对于32/64的系统来说&#xff0c;mtime的值都是64bits的&#xff1b; 与mtime对应的&#xff0c;还有一…
阅读更多...
uniap vue3 组件使用uni.createSelectorQuery() 获取dom报错

uniap vue3 组件使用uni.createSelectorQuery() 获取dom报错

由于vue3中没有this&#xff0c;所以使用uni.createSelectorQuery().in(this)时&#xff0c;会报错 使用 getCurrentInstance 获取组件实例 使用 uni.createSelectorQuery() 批量查询时&#xff0c;结果是按照查询的顺序返回的 使用示例 import { getCurrentInstance } from…
阅读更多...
70.网游逆向分析与插件开发-角色数据的获取-自动化助手UI显示角色数据

70.网游逆向分析与插件开发-角色数据的获取-自动化助手UI显示角色数据

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;利用技能点属性分析角色数据基址-CSDN博客 码云地址&#xff08;ui显示角色数据 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;367aa71f60b…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023