css常用标签及页面布局

最新推荐文章于 2022-09-12 15:06:15 发布
VIP文章 最新推荐文章于 2022-09-12 15:06:15 发布
阅读量1k 收藏 1
点赞数
分类专栏： Java web 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46487113/article/details/107241418
版权

JAVA Web基础

css标签

  1. 在css标签中，我们要对一个标签或者多个标签的属性进行改变，那么我们要通过选择器来过滤出自己需要的标签，对标签进行样式修改。
  2. css中的选择器：
    • ID选择器：使用div时，定义id号，并且通过id过滤出自己想要改变的元素
    • 类选择器：使用div时，定义类名，并且通过类名过滤出自己想要改变的元素
    • 标签名选择器，通过标签名，来过滤出自己想要改变的标签，改变样式。
    • 属性选择器：通过一些特定的属性来改变样式。
    • 伪类选择器
    • 伪元素选择器
  3. 选择器的优先级：
    • 当一个内容被多个选择器过滤出来时，那就要依据选择器的优先级来改变样式。
    • 同级选择器，是后面的覆盖前面的属性。
    • 选择器的优先级：【从高到低】内联样式–>id选择器–>类选择器=属性选择器=伪类选择器–>标签选择器=伪元素选择器。以优先级高的样式为基准。

动画属性

  1. 动画的创建：

    • 使用属性将动画与div元素绑定

      • 定义和用法

      • animation 属性是一个简写属性，用于设置六个动画属性：

      • animation-name 定义动画的名称

      • animation-duration: time;动画运行完花费的时间

      • animation-timing-function ：规定动画运行是速度的变化规律。

      • animation-delay ：延时运行的时间

      • animation-iteration-count ：运行的次数

      • animation-direction ：运行时的方向，normal默认值正常播放，alternate是先正常播放，到头之后在反向返回

  2. 动画与div绑定之后，使用@keyframes规则，让动画以什么规则运行

    • 通过 @keyframes 规则，您能够创建动画。

      创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

      在动画过程中，您能够多次改变这套 CSS 样式。

      以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

      0% 是动画的开始时间，100% 动画的结束时间。

      为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

背景属性

  1. background-repeat 属性设置是否及如何重复背景图像。

    • repeat 默认。背景图像将在垂直方向和水平方向重复。
      repeat-x 背景图像将在水平方向重复。
      repeat-y 背景图像将在垂直方向重复。
      no-repeat 背景图像将仅显示一次。
      inherit 规定应该从父元素继承 background-repeat 属性的设置。

  2. background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

    • scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
      fixed 当页面的其余部分滚动时，背景图像不会移动。
      inherit 规定应该从父元素继承 background-attachment 属性的设置

浮动属性

  1. 是让div块标签一字排开，使用flow标签，
</div>
<div id="d2" class="mydiv">

</div>
<div id="d3" class="mydiv">

</div>
<div id="d4" class="mydiv">

</div>
<!-- 下面的层如果不想浮动了，可以清除浮动 -->
<div style="clear:both"></div>
<div id="d5">

</div>

边框属性

  1. 对于边框，我们可以使用border标签里面的属性对各个边框的形状，颜色，宽窄等作出规定。

  2. 边框圆角，我们可以对边框做出圆角，使用border-radius,可以对边框进行圆角修饰，可以单独对边框的四个圆角修饰border-top-left-radius---->是上左角

  3. 可以分别对四个边框的颜色，宽窄，形状做出调整

    border-left 在一个声明中设置所有的左边框属性。
    border-left-color 设置左边框的颜色。
    border-left-style 设置左边框的样式。
    border-left-width 设置左边框的宽度。

段落的设置

  1. 常见的段落的设置就是每个堕落的首行缩进，以及行间距等
    • direction，文本的方向ltr 默认。文本方向从左到右。 rtl 文本方向从右到左。
    • text-indent ，文本的首行缩进，一般使用 参数是2em，意思是缩进两个字符
    • line-height,设置文本的行高。

网站布局：

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* div {
				/* 	border: 1px black solid; */
			/* 	margin-top: 10px;
			} */		
#d1 {
   
			width: 100%;
			height: 100px;
			display: flex;
			/* background-color: green; */
			flex-wrap: nowrap;
		}

		#d2 {
   
			width: 100%;
			height: 70px;
			background-color: #008BFC;
			display: flex;
			/* overflow: hidden; */
			flex-wrap: nowrap;
			margin-top: 10px;
		}

		.d1n {
   
			float: left;
			margin-top: 10px;
			display: flex;

		}

		#d1n1 {
   
			height: 80%;
			width: 100px;
			margin-left: 200px;

		}

		#d1n2 {
   
			height: 80%;
			width: 350px;
			margin-left: 5px;
			display: flex;

		}

		#d1n3 {
   
			height: 80%;
			width: 100px;
			margin-left: 200px;
		}

		#d1n4 {
   
			height: 80%;
			width: 300px;
			margin-left: 5px;
			font-size: 20px;
			text-align: left;
			line-height: 80px;

		}

		#d1p {
   
			margin-left: 5px;
			font-size: 30px;
			margin-top: 15px;
		}

		.d2n {
   
			/* border: 1px black solid; */
			margin: auto;
			font-size: 20px;
			text-align: center;
			height: 20px;
			width: 120px;
			color: white;
			font-family: 黑体;

		}

		/* 课程中心悬浮设计 */
		#d2n2 {
   
			overflow: hidden;
			transition: overflow 2s;
		}

		#d2n2:hover {
   
			overflow: visible;
			margin-top: auto;
			transition: overflow 2s;

		}

		#d2n2>div {
   
			/* border: 1px black solid; */
			width: 100%;
			/* height: 200px; */
			/* background-color: #008BFC; */
			margin-top: 27px;
			font-size: 18px;
		}

		#d2nei>div {
   
			/* border: 1px black solid; */
			width: 100%;
			height: 40px;
			margin-top: 25px;
			border-radius: 5px;
			background-color: #008BFC;
			text-align: center;
			line-height: 40px;
		}

		/* 教学体系悬浮设计 */
		#d2n3 {
   
			overflow: hidden;
		}

		#d2n3:hover {
   
			overflow: visible;
			margin-top: auto
最低0.47元/天 解锁文章
一天3顿饭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS常用标签
weixin_67614925的博客
05-11 3967
文章目录文字居中对齐图片居中对齐背景图文本缩进透明度三角形制作隐藏overflow应用 接下来介绍一些常用的css标签，话不多说 showcode！！！ 文字居中对齐 <head> <style> * { margin: 0 auto; padding: 0; } div { margin: 30px; padding: 0;
最简单的css+js标签页效果制作
tom9238的博客
04-16 3386
最简单的css+js标签页效果制作 之前见网上的标签页虽然效果很好，但是额外的代码太多，让人分不清写一个标签页究竟需要什么，所以我来写一个最简单的,其他效果你们可以自己按喜好添加。 目录最简单的cssjs标签页效果制作效果图 实现原理 html 代码 css代码 js 代码 源码下载 以往博客地址效果图注：需要导入jquery库 实现原理： 让标签页都固定在一个位置（标签按钮下面）通过控制
html和css的所有标签页,HTML和CSS常用标签和基本使用
weixin_39857480的博客
06-20 444
1.HTML常用标签1.标签分类块元素 (行元素)内联元素 (行内元素)块元素的特点:单个块元素在浏览器中默认独占一行两个块元素不能够在一行显示, 他们会自动换成两行显示块元素可以设置宽高等属性.内联元素:多个内联元素可以在一行显示内联元素不能够设置宽高, 设置了也没有用, 不会显示出效果内联元素的宽高由他们本身的内容多少来支撑, 内容多,宽高自动增加.2.常用块元素标签1. 标题标签​ 表示文档...
用纯CSS实现优雅的tab页
qq_25983579的博客
08-24 1268
说明 又是一个练手的小玩意儿，本身没什么技术含量，就是几个不常用的CSS3特性的结合而已。 要点 Label标签的for属性 单选框的:checked伪类 CSS的加号[+]选择器 效果图 原理 通常tab页的交互都是点击tab头然后展示对应的一块内容，这种排他性跟HTML里面的某个原住民很类似，是啥呢？没错！就是单选框组。 单选框组有一个:checked伪类，可以设定单选框被选中后的样式，所以我们要把一组单选框当做tab页的头部么？当然不是，单选框是很固执的，用CSS去感化他是很吃力的，那怎么办呢？
css实现的最简单的标签页
diligentcat的专栏
09-23 1751
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">         CSS标签             dl         {
css+jquery实现简单标签页效果html代码
04-16
css+jquery实现最简单标签页效果html代码，效果很好
纯css写的一个tab标签切换页.html
05-20
纯h5+css实现tab标签页面的切换，不需要js对dom的操作，
前端css+html+布局笔记
09-14
常用标签 网页的根标签 一个页面中有且只有一个根标签 网页中的所有内容都需要写在html标签的内部 网页的头部 该标签中的内容不会在网页中直接显示 该标签用于帮助浏览器解析页面 子标签 ...
DIV CSS网页布局的基础知识整理
12-12
jb51.net的CSS教程栏目中汇集了大量的CSS知识，这些知识已经非常全面了，但很多CSSer新手初来本站，依然云里雾里，现整理一些DIVCSS网页布局常用的一些基础知识，供大家学习，欢迎补充及提一些建议。CSS命名规范一．...
使用HTML开发商业网站-DIV+CSS布局布局及常用属性课件.pptx
07-10
布局及常用属性 布局概述 为什么要应用布局？ 布局概述 阅读报纸时会发现，虽然报纸中的内容很多，但 是经过合理地排版，版面依然清晰、易读。 1.确定版心 什么是版心？以某教育网站首页为例： 布局概述 布局概述 2....
常用的 css 命名规则(推荐)
12-13
常用的 css 命名规则(推荐) 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo ...
即用即查HTML+CSS标签参考手册
03-16
　06文件夹：页面的布局与分隔，包括11个例子。 　07文件夹：列表，包括8个例子。 　08文件夹：表单，包括39个例子。 　09文件夹：表格，包括39个例子。 　10文件夹：框架结构，包括33个例子。 　11文件夹：其他常用...
css常用标签
fanbutuan的博客
09-12 1359
css常用属性标签
html和css的所有标签页,html和css的常用标签及练习
weixin_36393239的博客
06-20 139
1.htmlhtml：显示数据结构title>head>hello！body>Html>设置标题 h1----h6 图片 超级链接列表自定义 dl dt dd有序 ol li无序 ul li表单action 表示提交之后的后台处理程序的名称method：get/postmethod="post"只有此一种情况是post请求，其余的请求方式都是getget和post请求区别：...
CSS基础及常用的一些标签
SunsetGirl的博客
04-13 5570
CSS 指的是层叠样式表 ，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作。它可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中
CSS tab选项卡(标签页)切换
热门推荐
兜ぃф糖
07-12 1万+
在github上看到一篇 You dot need JavaScript 很多效果不需要js也能做到，比如手风琴的效果，轮播，弹出的对话框，工具提示，标签页的切换，多级的下拉菜单等等，css甚至还能做游戏！ 之前就看到一个用css制作的轮播的例子，这次又遇到了，所以简单记录下。 观察了那篇github中的几个例子，不难发现凡是涉及到点击事件的都是通过隐藏的input和与之关联的label
一个简单的tab标签页，纯css+js写的，带样式
yunsyz的专栏
01-27 6012
最近经常要用tab标签页，所以写了一个简单的，以后用的话直接拷贝一个，稍微改改就OK了。 先看效果图： 接下来看下代码怎么写的吧： 一、sp文件easytab.jsp <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName(
HTML+CSS 基础 之页签
雾气
10-13 4670
HTML: 超文本标记语言 编写helloworld 列表介绍 列表形式. A连接介绍        页面标签 图片标签 表格标签 表格合并：上下合并rowspan（下删）/左右合并colspan（同行） Form表单    &lt;form method="po...
HTML5--纯CSS3实现的tab标签切换
大数据-攻城狮
12-07 4668
CSS3代码实现的tab标签切换 *{padding:0px;margin:0px;} #tab{margin:20px;20px;position:relative;} ul{list-style:none;} ul li{float:left;} ul li a{background:#f90; color:#fff;
div+css标签布局csdn
最新发布
07-07
div是网页开发中常用的一个CSS标签，用于进行布局和定位。 CSS（层叠样式表）是一种样式规范语言，用于控制网页的展示效果。CSDN（中文技术社区）是一个IT技术交流平台。 在CSDN中使用div和CSS进行布局可以实现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值