前端路线--HTML篇（day07）

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量106 收藏
点赞数
分类专栏： 前端 文章标签： html 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/122375867
版权

边框三角形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 0px;
			height: 0px;

			/*利用边框加厚，内容宽高为0，形成的三角形*/
			/*把其他的三个边调整为透明色，得到一个三角形*/
			border-top: 50px solid transparent;
			border-left: 50px solid transparent;
			border-right: 50px solid #f0f;
			border-bottom: 50px solid transparent;
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
</body>
</html>

边框圆角

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 405px;
			height: 405px;
			margin: 100px auto;
			border:1px solid #000;
		}
		.box div{
			width: 200px;
			height: 200px;
			display: inline-block;

		}
		.box1{
			background-color: #f00;
			border-radius: 0px 200px;
			/*边框圆角*/
		}
		.box2{
			background-color: #ff0;
			border-radius: 200px 0px;
		}
		.box3{
			background-color: #0ff;
			border-radius: 200px 0px;
		}
		.box4{
			background-color: #f0f;
			border-radius: 0px 200px;
		}

		.box:hover{
			transition: 5s;
			transform: rotateZ(3600deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</div>
</body>
</html>

计算盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.demo{
			width:200px;
			height:200px;
			border:1px solid red; 
			padding:20px;
		}
		.demo1{
			width: 373px;
			height: 398px;
			padding-left:25px;
			border: 1px solid red;
		}
		.box{
			width: 400px;
			height: 400px;
			border:1px solid #000;
		}
		.box1{
			width: 200px;
			height: 200px;
			border:1px solid #000;

			margin: 100px;
		}
	</style>
</head>
<body>
	<div class="demo"></div>
	<div class="demo1"></div>

	<div class="box">
		<div class="box1"></div>
	</div>

	<!-- 一个盒子需要占用的空间是 400*400， 但是盒子又有 padding-left:25px, border: 1px solid red; 问，我们需要改动盒子宽度为多少？

	如何让一个200 200像素的盒子， 在一个400 400的盒子里面水平居中，垂直居中。 -->
</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: #00f;

			/*左浮动：脱离文档流，浮动元素从左到右依次排列*/
			float: left;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: #ff0;

			float: left;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: #f0f;
			/*右浮动*/
			float: right;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2">你好发生发</div>
	<div class="box3"></div>
</body>
</html>

清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 200px;
			height: 200px;
			background-color: #00f;

			/*左浮动：脱离文档流，浮动元素从左到右依次排列*/
			float: left;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: #ff0;

			float: left;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color: #f0f;
			/*右浮动*/
			float: right;
		}

		.box4{
			width: 100%;
			height: 100px;
			background-color: #000;
		}
		.box{
			width: 100%;
			height: 200px;
		}
	</style>
</head>
<body>
	<!-- 解决浮动带来的影响： -->
		<!-- 给浮动元素添加父元素，给父元素设置宽高 -->
	<div class="box">
		<div class="box1"></div>
		<div class="box2">你好发生发</div>
		<div class="box3"></div>
	</div>

	<div class="box4">
		
	</div>
</body>
</html>

网页布局1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*清除默认样式*/
		*{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		.nav{
			width: 1200px;
			height: 80px;
			margin: 0 auto;
		}
		.nav .logo{
			width: 200px;
			height: 80px;
			float: left;
		}
		.nav ul{
			width: 800px;
			height: 80px;
			float: right;
		}
		.nav ul li{
			width: 100px;
			height: 80px;
			float: left;
			text-align: center;
			line-height: 80px;
		}

		.navbar{
			width: 100%;
			height: 40px;
			background-color: #999;
		}
		.navbar-layout{
			width: 1200px;
			height: 40px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div class="nav">
		<div class="logo">
			<img src="img/logo.jpg" alt="">
		</div>
		<ul>
			<li>首页</li>
			<li>关于利人</li>
			<li>关于利人</li>
			<li>关于利人</li>
			<li>关于利人</li>
			<li>关于利人</li>
			<li>关于利人</li>
			<li>关于利人</li>
		</ul>
	</div>

	<div class="navbar">
		<div class="navbar-layout">
			
		</div>
	</div>
</body>
</html>

网页布局2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*清除默认样式*/
		*{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}

		.box{
			width: 1000px;
			height: 300px;
			margin: 0 auto;
			/*border:1px solid red;*/
		}
		.box div{
			width: 300px;
			height: 300px;
			float: left;
			/*border:1px solid red;*/
			text-align: center;
		}
		.box div img{
			border-radius: 50%;
			margin: 50px 0px 30px;
		}
		.box .middle{
			margin: 0px 47px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div>
			<img src="img/icon-01.jpg" alt="">
			<h2>行业解决方案</h2>
			<p>
				客户服务体系，对讲集群系统<br>手机名片，移动业务，解决方案
			</p>
		</div>
		<div class="middle">
			<img src="img/icon-02.jpg" alt="">
			<h2>行业解决方案</h2>
			<p>
				客户服务体系，对讲集群系统<br>手机名片，移动业务，解决方案
			</p>
		</div>
		<div>
			<img src="img/icon-03.jpg" alt="">
			<h2>行业解决方案</h2>
			<p>
				客户服务体系，对讲集群系统<br>手机名片，移动业务，解决方案
			</p>
		</div>
	</div>
	<p>
		—————————————— P U O D U C T ——————————————
	</p>
</body>
</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
影响盒子大小的因素，案例-利用padding改变盒子大小的性质来制作导航栏
qq_43632490的博客
06-03 915
padding和border的设置会影响盒子的实际大小，因此需要注意一下width和height的设置，注意去掉padding和border的大小。 模拟新浪导航栏：
HTML5网页设计样式-盒子模型练习
m0_66168318的博客
04-07 1784
题目：如何让个200x200像素的盒子，在一个400x400的盒子里面水平居中，垂直居中。 解法：
CSS--盒模型
qq_27150223的博客
02-03 289
盒子模型 其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 看透网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图...
CSS-1
Kunjpg的博客
09-17 238
简单小米边框 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单小米边框</title> <style> /* 1. 把 a 转换成块级元素 */ a { display: bloc
CSS盒子模型（二）
林彬的专栏
05-25 732
content宽度和高度 使用宽度属性width和高度属性height可以对盒子的大小进行控制。 width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。 大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是： 盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边...
前端路线--HTML篇(day01)
Yan9_9的博客
12-30 350
前端知识点
前端路线--HTML篇（day05）
Yan9_9的博客
01-05 68
背景颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; heigh
前端路线--HTML篇（Day03）
Yan9_9的博客
01-04 237
CSS的引入方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第二种:内联样式 --> <style> sp
前端路线--HTML篇（day04）
Yan9_9的博客
01-04 114
标签的分类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> hr{ width: 400px; height
练习前端-HTML标签进阶篇-day02-03
08-19
练习前端-HTML标签进阶篇-day02-03
学习前端-HTML-day01
08-17
学习前端-HTML-day01
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
Web前端.DAY4-性html.avi
05-16
Web前端.DAY4-性html.avi
前端（day03-精灵图）
06-17
PICKPICK
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1175
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 412
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 251
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值