case 1

最新推荐文章于 2024-09-10 22:55:28 发布
最新推荐文章于 2024-09-10 22:55:28 发布
阅读量515 收藏
点赞数
分类专栏： JavaWeb 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44110581/article/details/112233280
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div</title>
		<style>
			.c1 {
				border-left: 10px solid aqua;
				border-right: 10px solid aquamarine;
				border-bottom: 10px solid #0000FF;
				border-top: 10px solid #FF0000;
				/* 居中 */
				margin: 0 auto;

				width: 100px;
				height: 100px;
			}

			.c2 {
				border: 10px solid blue;
				margin: 15px;
			}

			* {
				margin: 0;
				padding: 0;
			}

			.box1 {
				width: 200px;
				height: 200px;
				background: yellowgreen;
				margin: 30px;
			}

			.box2 {
				width: 200px;
				height: 200px;
				background: gray;
				margin: 20px;
			}
		</style>

	</head>
	<body>
		<div class="c1"></div><!-- div特征 块级元素独占一行 默认：w宽度为浏览器宽，h高度0,高度会被内容撑开 -->
		<div class="c2"></div>
		<!-- margin的塌陷 两个盒子的margin的相交时，会出现margin值小的失效 -->
		<!-- 垂直之间塌陷的原则是以两盒子最大的外边距为准。 -->
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</body>
</html>


<!DOCTYPE html>
<html><!---->
	<head>
		<meta charset="utf-8" />
		<title>case1</title>
		<style>
			body{margin: 0;}
			img{}
			.c1{
				width: 100px;
				height: 100px; 
				border: 5px solid red;
				border-bottom: 5px blue;
		    	border-top: 5px slide yellow;
				border-right: 5px slide trasparent;/* 透明 */
				/* 没有给到的值参考对立面,顺时针顺序,上右下左 */
				padding: 10px;
				/* 居中方式一 上下为零,左右居中 */
				margin: 0 auto;
				/* 块级元素 */
				/* display: block; */
				/* 默认垂直对齐基线  去掉图片底部的3像素 */s
				vertical-align: bottom;
				}
			div{
				/* 居中方式二 */
				width: 100px;
				margin:0 auto; 
				}
		</style>
	</head>
	<body>
		<div>   <!-- 盒子 -->
		<img style="width: 100px; height: 300px;" src="js/case%2001.jpg" alt="">	<!-- w100 tab 快捷键 -->	
		</div>
		<span id="">
			Aj
		</span>
		<img class="c1" src="js/case2.jpg" alt=""><!-- 基线 -->
		<span>字段1</span> <!-- 块级元素独占一行 -->
		<span>字段二</span>
	</body>
</html>



<!DOCTYPE html>1
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
		.box1{
			border: 1px solid red;
			width: 300px;
			/* height: 300px; */
		}
		.box2{
			border: 1px solid black;
			/* width: 100px; */
			height: 150px;
			float: left;/* 浮动子盒的宽度是内容宽 内容不够，在加宽度 */

		}
		.box3{
			border: 1px solid blue;
			width: 100px;
			height: 150px;
			float: left;
		}
		.box4{border: 1px solid green;}
	</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">1111111</div>
			<div class="box3"></div>
		</div>
		<div class="box4">
		浮动子盒的宽度是内容宽 浮动的子盒撑不开父子盒，浮动盒子盖住其他盒，子盒宽度小于父盒
		
		div特征 块级元素独占一行 默认：w宽度为浏览器宽，h高度0,高度会被内容撑开
		</div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				border: 10px solid red;
				width: 300px;
				height: 300px;
				padding: 20px;
			}
			.box2{
				border: 10px solid blue;
				background-color: yellow;
				/* width: 290px; */
				height: 290px;
			}
			.box3{
				margin: 30px;
				border: 10px solid green;
				height: 280px;
				/* width: 280px; */
			}
			嵌套 margin塌陷
			父盒子与子盒子一起与页面顶端产生了10px间隙
			为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
		</style>
	</head>
	<body>
		<!-- div.box1>div.box2>div.box3 -->
		<div class="box1">
			<div class="box2">
				<div class="box3">123</div>
			</div>
		</div>
	</body>
</html>
1 div和浮动 浮动子盒的宽度是内容宽 浮动的子盒撑不开父子盒，浮动盒子盖住其他盒，子盒宽度小于父盒 div特征 块级元素独占一行 默认：w宽度为浏览器宽，h高度0,高度会被内容撑开 有关快级元素： none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） 2 /* 闭合浮动/请浮动 */ 文字 /* 
	第一种方法：在浮动子盒的下面加一个div 加上clear：both
	在parent容器中，在子元素的最后
	加入一个空的块级元素，并给它一个拥有clear：both属性的clear的类选择器。
	第二种，在parent容器中添加overflow：auto的属性，并针对于IE6增加zoom:1的属性
	第三种，在parent容器添加一个：
	after伪元素，
	并使用content："."或者为" "
	在元素的后面生成了内容为一个点的块级元素，
	并使用一切方法使这个块级元素隐藏并清除浮动clear:both。
	/* 在父盒 使用after：{clear：both} */
	.clearfix::before,
	.clearfix::after {
		content: ">>>>";
		display: table;
	}
	.clearfix::after {
		clear: both;
	}
	
	“第四种，让parent容器也浮动。”
	　　只需给parent容器添加 float：left，也可闭合浮动。
	
	文字
	font-size: 15px;
	/* 斜体 默认normal */
	font-style:italic;
	/*字体  */
	font-family:"Times New Roman";
	color:red;

	/* 修饰 */
	text-decoration:none;
	/* 上划线 */
	/* text-decoration:overline; */
	/* 删除线 */
	/* text-decoration:line-through; */
	/* 下划线 */
	/* text-decoration:underline; */
	width: 200px;
	height: 200px;
	border: 1px solid #7FFFD4;
	/* 行高 */
	line-height: 20px;
	color: #55ff7f;
	animation-direction: normal;
	unicode-bidi: bidi-override;
	/* letter-spacing:6px ; */
	word-spacing: 7px;
	white-space: 6px;
	/* 对齐方式 */
	/* text-align:center; */
	/* text-align:right; */
	/* text-align:left; */
	/* 两端对齐 */
	text-align:justify;
	/* 对齐 */
	text-align-last:center;
	<!-- 注意：text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。 -->
	/* 装饰 下划线 */
	text-decoration: underline;
	text-indent: 20px;
	text-transform: uppercase;
	text-transform: capitalize;
</body>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>wedding</title>
		<style>
			body {
				margin: 0;
			}
			div {
				/* margin: auto;		 */
			}
			/* *{}通配符选择器 */
			* {
				margin:0;
			}

			img {
				display: block;
				/* 	margin: auto; */
				vertical-align: bottom;
			}

			.w {
				margin: 0 auto;
				width: 1080px;
			}

			/*提供寬度才能居中*/
			/* 提出公共代碼 */
			.head {

				/* 	border: 12px solid red; */
				/* 观察div */
			}

			.ad {
				/* margin: 0 auto;
				width: 1080px; */
				padding: 15px 0 15px 0;
			}

			.ap {
				/* margin: 0 auto;
				width: 1080px; */
			}

			.bd {
				/* 边框测试用例 */
				border: 1px solid #FF0000;
			}

			.banerL {
				float: left;
			}

			.banerR {
				float: right;
			}

			.baner {
				float: left;
				padding-top: 15px;
			}

			.baner img {
				padding-right: 15px;
			}

			.baner img:nth-child(3) {
				padding-right: 0;
			}

			.fl {
				float: left;
			}

			.fr {
				float: right;
			}

			/* 以下为main区 */
			.main {}

			.brand {
				padding-top: 15px;
				height: 460px;
			}

			.brand .fl {
				/* width: 259px; */
				padding-right: 15px;
			}

			.brand .fl:nth-child(4) {
				padding-right: 0;
			}
			.title {
				border-bottom: 2px solid #f6f5f3;
				padding-top: 35px;
				/* height: 42px; */
			}

			.title .h3 {
				font-family: "黑体";
				font-style: 24px;
				height: 42px;
			}

			.sty{
				padding-top: 15px;
				padding-right: 15px;
				height: 600px;/* 设置高度撑开 */
			}
			.s {
				
			}
			.s img {
				padding-bottom: 15px;
				/* 	height: 460px; */
			}
			.s .fl {
				padding-right: 15px;
			}
			.s .fl:nth-child(3) {
				padding-right: 0;
			}

			/* user */
			.user {
				padding-top: 15px;	
				padding-bottom: 15px;
				height: 164px;
			}
			.user .fl:nth-child(3) {
				padding-right: 0;
			}
			.user .fl:nth-child(2) {
				padding-right: 44px;
			}
			.user .fl {
				padding-right: 15px;
			}

			/* hun */
			.hun{}
			.hun_L {
				padding-right: 15px;
			}
			.hun_L div {
				padding-top: 15px;
			}
			.hun_R .fl {
				padding-right: 15px;
				padding-top: 15px;
			}

			.hun_R .fl:nth-child(3) {
				padding-right: 0;
			}

			.hun_R .fl:nth-child(6) {
				padding-right: 0;
			}
			/* 粉色 */
			.pink{
				height: 220px;
				width: 355px;
				background-color: #ff6783;
				margin-bottom: 15px;
				padding-left: 20px;
			
			}
			.pinkTop{
				width: 334px;
				height: 84px;
				border-bottom: 2px solid #ff798a ;	/* */
			}
			.pinkTop h4{
				font-weight: 400;
				color: #ffffff;
				padding-top: 19px;
				padding-bottom: 1px;
				font-size: 23px;
			}
			.pinkTop p{
				
				font-size: 13px;
				color: #ffffff;
			}
			.pinkButton{
				height: 135px;
				padding-top: 7px;
			}
			.bai{
				height: 16px;
				background-color: #ffffff;
				float: left;
				color: #f62b48;
				font-family: "黑体";
				font-size: 13px;
				border-radius: 3px;
				margin-right: 15px;
				margin-top: 15px;
				padding:2px 4px 1px 4px;
			}
			.bai:nth-child(7){
				margin-right: 86px;
			}

		</style>
	</head>
	<body>
		<!-- head區 -->
		<!-- div*3>img -->
		<!-- div.fl*3>img -->
		<div class="w head"><img src="img/case-01_03.gif" alt=""></div>
		<div class="w ad"><img src="img/case-01_06.gif" alt=""></div>
		<div class="w ap"><img src="img/case-01_08.gif" alt=""></div>
		<!-- baner区 -->
		<!-- div.baner -->
		<div class=" w">
			<div class="banerL">
				<div><img src="img/banner_L.gif" alt=""></div>
				<div class="baner">
					<div class="fl"> <img src="img/baner1.gif" alt=""></div>
					<div class="fl"> <img src="img/baner2.gif" alt=""></div>
					<div class="fl"> <img src="img/baner3.gif" alt=""></div>
				</div>
			</div>
			<div class="banerR"><img src="img/baner-R.gif" alt=""></div>
		</div>
		<!-- main区 -->
		<div class="w main">
			<div class="title">
				<h3>品牌</h3>
			</div>
			<div class="brand">
				<!-- div.fl*3>img -->
				<div class="fl"><img src="img/main.jpg" alt=""></div>
				<div class="fl"><img src="img/main2.jpg" alt=""></div>
				<div class="fl"><img src="img/maincase-02_03_03.jpg" alt=""></div>
				<div class="fl"><img src="img/maincase-02_03_07.jpg" alt=""></div>
			</div>
			<div class="title">
				<h3>风格</h3>
			</div>
		</div>
		<!-- style区 -->
		<div class="w sty">
			<div class="fl s">	
				<div class="pink">
				<div class="pinkTop">
					<h4>太原婚纱照精选商家</h4>
					<p>Featured businesses</p>
					</div>
				<div class="pinkButton">
					<div class="bai"><p>太原金夫人</p></div>
					<div class="bai"><p>幸福V摄影</p></div>
					<div class="bai"><p>罗亚摄影</p></div>
					<div class="bai"><p>爱萌18号</p></div>
					<div class="bai"><p>栖溪创意水下摄影</p></div>
					<div class="bai"><p>布拉格</p></div>
					<div class="bai"><p>凯瑟琳摄影</p></div>
					<div class="bai"><p>佳丽新娘婚纱</p></div>
					<div class="bai"><p>爱上婚纱摄影</p></div>
					<div class="bai"><p>卡罗摄影</p></div>
					</div>
				</div>
					
				<div><img src="img/style-01_29.gif" alt=""></div>
			</div>
			<div class="fr s">
				<div class="fl">
					<div class=""><img src="img/style-01_17.gif" alt=""></div>
					<div class=""><img src="img/style-01_25.gif" alt=""></div>
					<div class=""><img src="img/style-01_33.gif" alt=""></div>
				</div>
				<div class="fl">
					<img src="img/style-01_19.gif" alt="">
					<img src="img/style-01_26.gif" alt="">
					<img src="img/style-01_34.gif" alt="">
				</div>
				<div class="fl">
					<img src="img/style-01_21.gif" alt="">
					<img src="img/style-01_27.gif" alt="">
					<img src="img/style-01_35.gif" alt="">
				</div>
			</div>
		</div>

		<!-- user -->
		<!-- <div class="bd w"><img src="img/user.gif" alt=""></div> -->
		<div class="w user">
			<div class="title">
				<h3>用户	</h3>
			</div>
			<div class="fl"><img src="img/use1.gif" alt=""></div>
			<div class="fl"><img src="img/user2.gif" alt=""></div>
			<div class="fl"><img src="img/user3.gif" alt=""></div>
			<div class="fr"><img src="img/user4.gif" alt=""></div>
		</div>

		<!-- hun -->

		<div class="w hun">
			<div class="title">
				<h3>婚庆</h3>
			</div>
			<div class="hun_L fl">
				
				<div class=""><img src="img/hun_L1.gif" alt=""></div>
				<div class=""><img src="img/hun_L2.gif" alt=""></div>
			</div>
			<div class="hun_R">
				<div class="fl"><img src="img/hun_R1.gif" alt=""></div>
				<div class="fl"><img src="img/hun_R2.gif" alt=""></div>
				<div class="fl"><img src="img/hun_R3.gif" alt=""></div>
				<div class="fl"><img src="img/hun_R4.gif" alt=""></div>
				<div class="fl"><img src="img/hun_R5.gif" alt=""></div>
				<div class="fl"><img src="img/hun_R6.gif" alt=""></div>
			</div>
		</div>
		<div class="foot w"><img src="img/foot.gif" alt=""></div>
	</body>
</html>
爱小黄
关注
专栏目录
case(1)优先编码器的一种方法
qq_44766436的博客
03-08 1999
博主在HDLBits上学习时，做到一个优先编码器的问题，利用case()语句可以完美解决，博主在网上看到了一个不一样的答案，现在分享给大家。
case study
weixin_64735714的博客
12-29 104
检索-中国知网连通域标记Review Paper：benchmark肯定算是其中的一个review paper了。看benchmark的论文report结论，看能否回答问题。需要回答的问题：（2A）在这领域内最常被引述的方法有哪些？（2B）这些方法可以分成哪些主要派别？（2C）每个派别的主要特色（含优点和缺点）是什么？① 找paper：keywordsReview Paper：benchmark肯定算是其中的一个review paper了。
Case 1——碎知识
weixin_47133613的博客
12-02 647
在Linux中进行C开发，可以使用vim vim hello.c ： C文件编辑过程 gcc hello.c ： C文件编译过程 命令 gcc -o hello.c ： 把编译的结果放在指定的文件内。 若没有“ -o”，会生成 a.out 文件 （ ./a.out 可以运行文件） 企业一般不会采用图形界面，这样会有额外的开销，对CPU的需求也会增大。企业使用命令行进行操作。 Windows ——> 个人电脑，内存不够，我们可以自行购买扩容。 Linux ——> 使用命令行操作，.
verilog case(1)
zya1314125的博客
09-20 1318
verilog case(1)
case1
xiaomin881122的专栏
12-31 1215
测试用例[1]（Test Case）目前没有统一的定义。比较常用的说法是：指对一项特定的软件产品进行测试任务的描述，体现测试方案、方法、技术和策略。内容包括测试目标、测试环境、输入数据、测试步骤、预期结果、测试脚本等，并形成文档。 不同类别的软件，测试用例是不同的。不同于诸如系统、工具、控制、游戏软件，管理软件的用户需求更加不统一，变化更大、更快。 一、测试用例是软件测试的核心 软件测试的重
Case的误用（1）
qq_38933775的博客
12-12 1403
Case语句的错误用法，在以下case语句中，当符合case 0x00时，跳出第一个case语句，但是没有跳出总case语句，因此会继续往下运行，原因就是没有跳出总的case语句 switch( uiCommAisleCode ) { case 0x00: switch( index ) { case 0: stTermCommParam.stTermCommParam1.aucTermCommM...
case语句
HongfeiAn
10-31 4700
--case语句 --case语法1： --case when condition1 then returnValue1 --when condition2 then returnValue2 --when condition3 then returnValue3 --..... --else defultValue --end as[列别名]   --查询学生的数学成绩，以优良...
case1.java
10-29
case1.java
case1_test.m
11-15
case1_test.m
C语言switch case语句详解
热门推荐
weixin_45743799的博客
02-22 10万+
当分支比较少的时候我们使用if else语句解决，当分支比较多的时候，我们要使用switch case语句解决，针对分支的复杂性选择合适的程序解决。 当分支过多时，用 if else 处理会不太方便，而且容易出现 if else 配对出错的情况。例如，输入一个整数，输出该整数对应的星期几的英文表示： #include <stdio.h> int main(){ int a; ...
c#中switch case的用法实例解析
09-04
- `case 1:`、`case 2:` 和 `case 3:` 是三个可能的值，如果`n`的值分别等于1、2或3，对应的代码块将会被执行。执行完代码后，`break`语句用于退出`switch`结构，防止执行其他`case`子句。这是`switch`语句的一个...
ASP中用select case代替其他语言中的switch case, default用case else
01-20
在这里，`expression`是一个计算后的值，`label_1`, `label_2`等是可能的比较值，`statements_1`, `statements_2`等是对应于每个`Case`的代码块。如果`expression`的值与某个`Case`标签匹配，那么相应的代码块将被...
case的用法（求解）
J_monster的博客
01-04 375
#include <stdio.h> int main() { float score; char grade; printf("请输入学生成绩:"); scanf("%f",&score); while (score>100||score<0) { printf("\n 输入成绩有误，请重试"); scanf("%f",&score); } switch((int)(score)) { case 100: case 90: grad
break后面的语句还执行吗_C语言switch case语句详解
weixin_39942191的博客
11-20 1107
C语言虽然没有限制 if else 能够处理的分支数量，但当分支过多时，用 if else 处理会不太方便，而且容易出现 if else 配对出错的情况。例如，输入一个整数，输出该整数对应的星期几的英文表示： #include 运行结果：Input integer number:3↙Wednesday对于这种情况，实际开发中一般使用 switch 语句代替，请看下面的代码： #include &...
【C语言学习记录】（五）——操作符详解③——赋值运算符 和 单目运算符
xueshengliang1998的博客
02-01 1981
C语言的赋值运算符与单目运算符
c语言case怎么理解,case1-12怎么理解
weixin_28695161的博客
05-24 3334
intsum,flag;switch(month){case1:flag=0;break;case2:flag=31;break;case3:flag=59;break;case4:flag=90;break;case5:flag=120;break;case6:flag=151;break;case7:flag=181;break;case8:flag=212...
Verilog中case(1‘b1)的使用说明
沧海一升的博客
07-06 6879
对verilog中case语句的用法进行补充说明。
switch case语句判断1-100之间的成绩等级
weixin_44396301的博客
11-15 2493
switch case语句判断1-100之间的成绩等级 public class Grade{ public static void main(String[] args) { int i = 90; //想要控制台手动输入的可以把这里换成Scanner方法 int x; if (i <= 60) { //用if条件来进行设定 x = 1; } else if (i > 60 && i < 80) { //满足条件60以上80以下的赋值2，对应良好 x = 2; } el
CSS —— 界面布局
最新发布
m0_73557953的博客
09-10 1022
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

爱小黄

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

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

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

打赏作者

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

抵扣说明：

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

余额充值