Day30

CSS

CSS常用样式

font-family:“微软雅黑” -设置字体

font-size: 50px -设置字体大小

font-style : italic-设置字体风格

font-weight:bolder -设置字体粗细

color: white-设置字体颜色

letter-spacing: 20px-设置文本内容的间隔

text-decoration :underline - 设置划线

text-align:center -设置文本对齐方式

background-color:red -设置背景颜色

border: black 5px solid -设置边框-颜色、粗细、实线

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{font-family: "微软雅黑";/*设置字体*/font-size: 50px;/*设置字体大小*/font-style: italic;/*设置字体风格*/font-weight: bolder;/*设置字体粗细*/color: white;/*设置字体颜色*/letter-spacing: 20px;/*设置文本内容的间隔*/text-decoration: underline;/*设置划线*/text-align: center;/*设置文本对齐方式*/background-color: red;/*设置背景颜色*/border: black 5px solid;/*设置边框 - 颜色、粗细、实线*/}a{text-decoration: none;/*设置划线*/}a:link {color: black}		/* 未访问的链接 */a:visited {color: black}	/* 已访问的链接 */a:hover {color: dodgerblue}	/* 鼠标移动到链接上 */a:active {color: dodgerblue}	/* 选定的链接 */button{background-image: url(../img/衣.jpg);/*设置背景图片*/background-repeat: repeat-y;/*设置背景平铺方式*/width: 500px;height: 500px;}</style></head><body><p>初心至善</p><a href="http://www.baidu.com">百度一下，你就知道</a><br /><button>普通按钮</button></body>
</html>

盒子模型

< div> < /div>

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{border: red 1px solid;width: 200px;height: 200px;/*margin: 50px; 设置上下左右外边距*/margin-top: 50px;/*设置上外边距*/margin-bottom: 50px;/*设置下外边距*/margin-left: 50px;/*设置左外边距*/margin-right: 50px;/*设置右外边距*/padding: 50px;/*padding: 50px; 设置上下左右内边距*/padding-top: 50px;/*设置上内边距*/padding-bottom: 50px;/*设置下内边距*/padding-left: 50px;/*设置左内边距*/padding-right: 50px;/*设置右内边距*/margin: 0 auto;/*水平居中,0表示上下外边距为0。auto表示左右外边距自动调整*/}</style></head><body><div>初心至善</div></body>
</html>

注意：
1.内边距会把盒子撑变形
2.为了兼容IE老版本，能用外边距就用外边距

定位

position: relative-相对定位：保留原有位置，针对于原有位置进行位移

position:absolute-绝对定位：不保留原有位置，找寻父级标签，判断父级标签是否有position样式，如果有就按照父级标签位移，如果没有就继续向上找寻，直到body标签为止。

position:fixed-固定定位：将组件固定到页面的某个位置

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;margin-top: 80px;}#box01{border: red 1px solid;width: 100px;height: 100px;position: absolute;/*绝对定位：不保留原有位置，找寻父级标签，判断父级标签是否有position样式，如果有就按照父级标签位移，如果没有就继续向上找寻，直到body标签为止*/top:50px;left:50px;}#box02{border: green 1px solid;width: 100px;height: 100px;position: relative;/*相对定位：保留原有位置，针对于原有位置进行位移*/top: 50px;left: 50px;}#box03{border: blue 1px solid;width: 100px;height: 100px;}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div id="box03"></div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">div{position: fixed;/*固定定位：将组件固定到页面的某个位置*/top: 50%;left: 90%;}</style></head><body><a name="top"></a><div><a href="#top">置顶</a></div><a href="#new01">法治</a><!--链接到锚点的位置--><a href="#new02">国际</a><!--链接到锚点的位置--><a href="#new03">娱乐</a><!--链接到锚点的位置--><a name="new01"></a><!--下锚点--><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><h1>法治新闻</h1><a name="new02"></a><!--下锚点--><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><h1>国际新闻</h1><a name="new03"></a><!--下锚点--><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1><h1>娱乐新闻</h1></body>
</html>

浮动

浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

解决办法：添加空盒子

在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div

.clear{clear:both;}
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#manager{border: orange 1px solid;}#box01{width: 50%;height: 100px;background-color: red;float: left;}#box02{width: 50%;height: 100px;background-color: blue;float: right;}.clear{clear: both;/*清除浮动影响 */}</style></head><body><div id="manager"><div id="box01"></div><div id="box02"></div><div class="clear"></div></div></body>
</html>
注意： clear属性的作用不是“清除”浮动元素，而是阻止元素与前面的浮动元素并排，强制将元素放到浮动元素的下方。因此，clear并不是在“清除”浮动元素本身，而是在清除浮动元素对后续普通流元素的影响。这确保了包含它们的父容器能够正确扩展以包含所有子元素的高度。换句话说，它支撑了父容器，使父容器扩展到足以包含浮动元素。

扩展

repeat-x：对图片在水平方向上重复

#EAF4FF：在背景图片未覆盖到的区域显示此颜色

border-radius: 5px：使得按钮的四个角都具有5像素的圆角，使按钮的外观更加柔和。

border-radius:50%：这条规则将图像的圆角半径设置为元素的50% ，使其变成一个圆。（如果图像不是正方形，那么这会使图像变成一个椭圆形。）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF;}button{width: 100px;height: 50px;color: white;font-weight: bolder;background-color: orange;border-radius: 5px;/*圆角属性*/box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/}img{border-radius:50%;}</style></head><body><button>普通按钮</button><br /><img src="../img/衣.jpg" /></body>
</html>

HTML5新特性

定义文档类型

在文件的开头总是会有一个标签

语言	文档类型声明方式
html4
html5

新增语义化标签

标签	描述
	头部标签
	导航标签
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/19905.shtml 如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！相关文章电动汽车电子系统架构电动汽车的普及正在稳步发展，供应链的各个环节也在发生变化。它涵盖了制造电动汽车零件的原材料、化学品、电池和各种组件。与此同时，汽车充电基础设施也参与其中，它们正经历一个历史性的阶段，经过彻底的重新设计。它们的电气化以… 阅读更多... Wpf 使用 Prism 实战开发Day30 登录界面设计一.准备登录界面图片素材（透明背景图片） 1.把准备好的图片放在Images 文件夹下面，格式分别是.png和.ico 2.选中 login.png图片鼠标右键，选择属性。生成的操作选择>资源 3.MyTodo 应用程序右键，属性&a… 阅读更多... 如何修改开源项目中发现的bug？如何修改开源项目中发现的bug？目录如何修改开源项目中发现的bug？第一步：找到开源项目并建立分支第二步：克隆分支到本地仓库第三步：在本地对项目进行修改第四步：依次使用命令行进行操作注意：Gi… 阅读更多... 地质灾害位移应急监测站地质灾害位移应急监测站是一种专门用于地质灾害预警和应急响应的设施，它能够实时监测和分析山体、建筑物、管道等的位移变化情况。以下是关于地质灾害位移应急监测站的详细介绍：主要组成部分传感器：安装于需要监测的位置，用于… 阅读更多... RK3588+FPGA+AI高性能边缘计算盒子，应用于视频分析、图像视觉等搭载RK3588（四核 A76四核 A55），CPU主频高达 2.4GHz ，提供1MB L2 Cache 和 3MB L3 ，Cache提供更强的 CPU运算能力，具备6T AI算力，可扩展至38T算力。产品规格系统主控CPURK3588，四核… 阅读更多... Nginx服务器替换SSL证书记得要重启输入访问域名，发现https证书过期了，果断申请好ssl证书，并在Nginx服务器上将原证书替换成新申请的证书。打开浏览器输入网址确认一看，还是原来的证书并没有替换成功?感觉不合常理以下开启了证书为什么替换不成功的排查 1、清除… 阅读更多... GUI 02：布局管理器相关知识，AWT 的 3 种布局管理器应用，以及嵌套布局的使用一、前言记录时间 [2024-05-31] 前置文章 GUI 01：GUI 编程概述，AWT 相关知识，Frame 窗口，Panel 面板，及监听事件的应用本文讲述了 GUI 编程种布局管理器的相关知识，以及 AWT 的 3 种布局管理器——流式布… 阅读更多... 【FPGA】Verilog语言从零到精通接触fpga一段时间，也能写点跑点吧……试试系统地康康呢~这个需要耐心但是回报巨大的工作。正原子&&小梅哥 15_语法篇：Verilog高级知识点_哔哩哔哩_bilibili 1Verilog基础 Verilog程序框架：模块的结构类比：c语言的基础… 阅读更多... P3881 最小值最大二分：枚举两个牛之间的最小距离，左端点是1，右端点是篱笆总长度。 Check数组：如果两头牛之间距离是Mid不合法，则返回0（false）；如果两头牛之间距离是Mid合法&#xf… 阅读更多... 去噪扩散概率模型在现代技术中的应用：图像生成、音频处理到药物发现去噪扩散概率模型（DDPMs）是一种先进的生成模型，它通过模拟数据的噪声化和去噪过程，展现出多方面的优势。DDPMs能够生成高质量的数据样本，这在图像合成、音频生成等领域尤为重要。它们在数据去噪方面表现出色&#xff0… 阅读更多... 瑞吉外卖项目学习笔记（二）后台系统的员工管理业务开发一、完善登录功能 1.1 问题分析 1.2 代码实现 package com.itheima.reggie.filter;//这是一个过滤器类 //登录检查过滤器import com.alibaba.fastjson.JSON; import com.itheima.reggie.common.R; import lombok.extern.slf4j.Slf4j; import org.slf4j.Logger; import org.slf… 阅读更多... 华为OD机试-最大坐标值题目描述与示例题目描述小明在玩一个游戏，游戏规则如下：在游戏开始前，小明站在坐标轴原点处（坐标值为 0）给定一组指令和一个幸运数，每个指令都是一个整数，小明按照指定的要求前进或者后退指… 阅读更多... 解析Java中1000个常用类：FunctionalInterface类，你学会了吗？ Java 8 引入了一系列新的特性和改进，其中之一便是函数式编程。函数式接口（Functional Interface）是函数式编程的核心概念之一。本文将深入探讨 FunctionalInterface 注解，介绍其用法、重要性，并通过示例展示如何在实际开发中应用函数式接口。什么是函数式接口？函数式… 阅读更多... 有向图的拓扑排序文章目录概念及模板例题杂务概念及模板有向图的拓扑排序是指将有向无环图中的所有顶点排成一个线性序列，使得图中任意一对顶点u和v，若边(u, v)在图中，则u在该序列中排在v的前面。例如，假设有n个任务，这些任务需… 阅读更多... HarmonyOS鸿蒙学习笔记（28）@entry和@Component的生命周期 entry和Component的生命周期 entry和Component的关系Component生命周期Entry生命周期生命周期流程图生命周期展示示例代码参考资料 HarmonyOS的生命周期可以分为Compnent的生命周期和Entry的生命周期，也就是自定义组件的生命周期和页面的生命周期。 entry和Compone… 阅读更多... 【传知代码】双深度学习模型实现结直肠癌检测（论文复现）前言：在医学领域，科技的进步一直是改变人类生活的关键驱动力之一。随着深度学习技术的不断发展，其在医学影像诊断领域的应用正日益受到关注。结直肠癌是一种常见但危害极大的恶性肿瘤，在早期发现和及时治疗方面具有重要意义。然而… 阅读更多... 快手发布大模型产品“可图”，超20种创新AI图像玩法限免上线近日，快手自研大模型产品“可图”（Kolors）正式对外开放，支持文生图和图生图两类功能，已上线20余种AI图像玩法。目前，用户可以通过“可图大模型”官方网站和微信小程序，免费使用各项AI图像功能。… 阅读更多... 纯分享#126个电商平台集合（包含60个不同国家）值得一看 01 亚洲中国淘宝：拥有大量的卖家和商品种类，主要面向中国市场。天猫:淘宝旗下的B2C电商平台，提供品质保证、正品保障的商品。京东:中国第二大B2C电商平台，提供品质保证、正品保障的商品。苏宁易购: 中国家电连锁巨头苏宁旗下的… 阅读更多... 反VC情绪：加密市场需要新的分布式代币发行方式 GME事件 GME事件反应了社交媒体在金融决策中的影响力，散户投资者群体通过集体行动，改变了很多人对股市的看法和参与方式。 GME事件中，meme扮演了核心角色。散户投资者使用各种meme来沟通策略、激励持股行为，创造了一种反对华尔街… 阅读更多... 【车载开发系列】汽车开发常用工具说明【车载开发系列】汽车开发常用工具说明【车载开发系列】汽车开发常用工具说明【车载开发系列】汽车开发常用工具说明一. CANbedded二. Davinci Configurator Pro三. Davinci Developer-AUTOSAR软件组件设计工具四. MICROSAR五. MICROSAR OS六. CANdelaStudio七. Volcano VSB八… 阅读更多... 最新文章熊海cms代码审计 [Java微服务组件]注册中心P3-Nacos中的设计模式1-观察者模式电脑访问 github提示找不到网页，处理方案 Linux系统中的网络管理 AI技术深度解析：从移动芯片到AIoT的全面突破使用CS Roofline Toolkit测量带宽 EAGLE代码研读+模型复现基于SFC的windows修复程序,修复绝大部分系统损坏 Copyright @ 2022~2023

Day30

Day30

CSS

CSS常用样式

盒子模型

定位

浮动

扩展

HTML5新特性

定义文档类型

新增语义化标签

相关文章