HTML复习笔记——CSS排版

最新推荐文章于 2023-10-01 12:51:27 发布
最新推荐文章于 2023-10-01 12:51:27 发布
阅读量203 收藏
点赞数
分类专栏： HTML学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LiMaoLin1999/article/details/103444704
版权

1 控制边界与边框

范例：

<title>不要说话</title>
<style type="text/css">
   <!--
     img.one{
	 margin-top:20px;/*上边界*/
	 margin-right:20px;/*右边界*/
	 margin-bottom:10px;/*下边界*/
	 margin-left:5px;/*左边界*/
	 }
	 img.all{ margin:5px 15px 10px 20px;}
	 -->
</style>
</head>
<body>
<table border="1" bordercolor="#33CCFF" align="center">
  <tr>
      <td><img src="../../qq图片/hgu.jpg" width="572" height="572" border="0" /></td>
  </tr>
</table><br />
<table border="1" bordercolor="#00CC66">
  <tr>
     <td><img src="../../qq图片/小李子.jpg" width="640" height="1138" border="0" class="one" /></td>
	 <td><img src="../../qq图片/一寸.jpg" width="342" height="441" border="0" border="0" class="all" /></td>
  </tr>
</table>
</body>

边框
border-style属性：用来设置边框的样式
例如：

<style type="text/css">
   <!--
     img{border-style:solid groove inset dashed}<!--输入4值，让四边应用不同的样式-->
	 div{border-top-style:dotted;
	 border-bottom-style:dashed;}
	 -->
</style>

border-width:边框的宽度，后可跟1值，也可以跟4值

div{border-width:10px;}

border-color，用来设置边框的颜色

大的例子：

<title>组件的定位</title>
<style type="text/css">
   <!--
     span{
	      position:absolute;
		  widows:20px;
		  height:150pt;
		  border:1px solid #CC00FF;
		  }
	 -->
</style>
</head>
<body>
<table border="1" align="center">
   <tr>
      <td>
	      <span style="left:10px;top:10px;overflow:visible">
		 问世间，情为何物，<br />
		 直教生死相许？<br />
         天南地北双飞客，<br />
		 老翅几回寒暑。<br />
         欢乐趣，离别苦，<br />
		 就中更有痴儿女。<br />
         君应有语：<br />
         渺万里层云，千山暮雪，<br />
		 只影向谁去？<br />
         横汾路，寂寞当年箫鼓，<br />
		 荒烟依旧平楚。<br />
         招魂楚些何嗟及，<br />
		 山鬼暗啼风雨。<br />
         天也妒，未信与，<br />
		 莺儿燕子俱黄土。<br />
         千秋万古，为留待骚人，<br />
		 狂歌痛饮，来访雁丘处。<br />
	  <td>
	      <span style="left:220px;top:10px;overflow:hidden;">
		  	 问世间，情为何物，<br />
		 直教生死相许？<br />
         天南地北双飞客，<br />
		 老翅几回寒暑。<br />
         欢乐趣，离别苦，<br />
		 就中更有痴儿女。<br />
         君应有语：<br />
         渺万里层云，千山暮雪，<br />
		 只影向谁去？<br />
         横汾路，寂寞当年箫鼓，<br />
		 荒烟依旧平楚。<br />
         招魂楚些何嗟及，<br />
		 山鬼暗啼风雨。<br />
         天也妒，未信与，<br />
		 莺儿燕子俱黄土。<br />
         千秋万古，为留待骚人，<br />
		 狂歌痛饮，来访雁丘处。<br />
		 </span>
		 </td>
	 <td>
	     <span style="left:440px;top:10px;overflow:scroll;">
	     问世间，情为何物，<br />
		 直教生死相许？<br />
         天南地北双飞客，<br />
		 老翅几回寒暑。<br />
         欢乐趣，离别苦，<br />
		 就中更有痴儿女。<br />
         君应有语：<br />
         渺万里层云，千山暮雪，<br />
		 只影向谁去？<br />
         横汾路，寂寞当年箫鼓，<br />
		 荒烟依旧平楚。<br />
         招魂楚些何嗟及，<br />
		 山鬼暗啼风雨。<br />
         天也妒，未信与，<br />
		 莺儿燕子俱黄土。<br />
         千秋万古，为留待骚人，<br />
		 狂歌痛饮，来访雁丘处。<br />
		 </span>
		 </td>
	 <td>
	     <span style="left:660px;top:10px;overflow:auto;">
	     问世间，情为何物，<br />
		 直教生死相许？<br />
         天南地北双飞客，<br />
		 老翅几回寒暑。<br />
         欢乐趣，离别苦，<br />
		 就中更有痴儿女。<br />
         君应有语：<br />
         渺万里层云，千山暮雪，<br />
		 只影向谁去？<br />
         横汾路，寂寞当年箫鼓，<br />
		 荒烟依旧平楚。<br />
         招魂楚些何嗟及，<br />
		 山鬼暗啼风雨。<br />
         天也妒，未信与，<br />
		 莺儿燕子俱黄土。<br />
         千秋万古，为留待骚人，<br />
		 狂歌痛饮，来访雁丘处。<br />
		 </span>
		 </td>  
	</tr>
</table>
</body>
林戊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
HTML+CSS+JS复习笔记
03-07
在“HTML+CSS+JS复习笔记”中，你可能会学习到以下关键概念： 1. HTML基本结构：包括<!DOCTYPE>声明、<html>、和元素。 2. HTML元素：如至标题、段落、链接、图像、和无序列表、和有序列表等。 3. CSS选择器：如...
HTML复习笔记—CSS样式表
LiMaoLin1999的博客
12-05 251
CSS
HTML CSS整理笔记(四）
weixin_44799645的博客
11-26 195
今天跟小常来给大家继续说一下HTML CSS整理笔记吧！ 一起来最后跟我继续学习复习下吧，一起加油吧！ 小常说一下： 灵感喜欢光顾勤劳的人,懒惰人不会遇到他 什么是“置换元素”？ 置换元素会根据标签属性来显示的元素。反之就是非置换元素了。 如img根据src属性来显示，input根据value属性显示，因此可知img和input是置换元素，同理textarea、 select也是置换元素。 ———...
CSS pink老师教学笔记详解
starry-sea1412的弃坑之路
05-17 804
CSS 是一种用于网页设计的样式表语言，通过定义样式规则来控制页面元素的显示效果。它提供了大量的样式属性和值，可以实现众多的视觉效果和交互特效，同时还支持媒体查询和响应式设计。CSS 可以以多种方式引入到 HTML 文档中，是 Web 页面的重要组成部分。
HTML CSS整理笔记(三）
weixin_44799645的博客
11-25 289
今天跟小常来给大家继续说一下HTML CSS整理笔记吧！ 一起来跟我继续学习复习下吧，一起加油吧！ 小常说一下： 命运要你成长的时候,总会安排一些让你不顺心的人或事刺激你.这是规律. ————8 定位网页元素———— 51.Position属性：指定盒子的位置，相对它父级的位置或它自身应该在的位置。 (1)static 默认无定位，元素按照标准文档布局。 (2)relative相对定位 a.特性:...
尚硅谷HTML习笔记
MissXu666的博客
10-01 479
C/S架构软件（client、server），需要安装才能使用的软件，需要偶尔更新，不跨平台。3、隐藏域，input的type设为用户不可见的一个输入区域。2、单选框，多个radio的name属性要保持一致，并且必须设置value，value即为选择的数据值。B/S架构软件（browser、server），直接在网页就可以使用的，无需安装和更新，可跨平台。1、存储时，务必采用合适的字符编码，否则无法存储数据会丢失。1、普通的输入框必须要写name，但不需要写value，Name相当于定义的key。
HTML CSS整理笔记(二）
weixin_44799645的博客
11-24 301
今天跟小常来给大家继续说一下HTML CSS整理笔记吧！ 一起来继续学习复习下吧，一起加油吧！ 小常说一下： 今天要做的事不要等到明天,该自己做的事不要让别人做 ——5 CSS3美化网页—— 32.CSS3设置文本样式： (1)标签：用来设置行内元素(或几个文字)的样式。 (2)字体样式： font-size：常用单位px font-family：若同时设中英文字体，英文字体要设置在中文字体前面 ...
小白快速入门CSS笔记！！
zxdznyy的博客
09-11 319
文章目录一，学习动机1.HTML基础2.CSS是什么3.写网页二 ，HTML&CSS结合第一种（初识style）1.HTML中div，span标签作用的复习2.使用style对div，span内容样式进行改变2.1 使用格式2.2border（边框）2.3 使用style和border改变样式三，结合使用第二种——单独定义div，span的样式1.单独开辟CSS的书写框2.CSS书写框中的注释3.改变div与span的样式四，结合使用第三种——单独写CSS后引用1.link标签2.单独写CSS文件3
HTML笔记
LIJINGPO的博客
07-31 202
1：C/S（client：客户端/server：服务器）、B/S（browser：浏览器/server：服务器）；IETF：全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网 技术标准均出自IETF。2：运行网页的浏览器有： 谷歌(Chrome) 、 Safari 、 IE 、 火狐(Firefox) 、 欧 朋(Opera) 等。
前端学习笔记：CSS页面布局——标准流、浮动和定位
ycsss的博客
10-26 625
黑马Pink老师的CSS教程： https://www.bilibili.com/video/BV1Bx411u7cS?p=103 https://www.bilibili.com/video/BV14J4114768?p=169 本文在原教程的基础上对目录结构进行了排序和裁剪。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及学习交流分享。 目录1. 标准流（文档流/普通流）normal flow2. 浮动 float2.1 浮动的定义2.2 浮动的特性2.3 浮动首先需要添加标准流
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html css js 学习笔记.zip
12-30
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
HTML5与CSS基础学习笔记
"这是一份关于HTML5和CSS的学习笔记，包含了HTML的基本认知、标签、标签间的关系、DOCTYPE声明、字符集、常用排版标签、文本格式化标签、标签属性的使用、图像标签以及链接标签等内容，适合初学者参考学习。笔记中还...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林戊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值