one-week 星巴克临摹html css注释知识点

最新推荐文章于 2023-11-27 21:07:46 发布

Alan杨亮

最新推荐文章于 2023-11-27 21:07:46 发布

阅读量475

点赞数

分类专栏：知识点-待整理（旧版）文章标签：作业理解

本文链接：https://blog.csdn.net/MathYounG/article/details/79504206

版权

知识点-待整理（旧版）专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>星巴克</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="whole">
			<div class="wholepart1">
				<div class="wholepart1title">
					<img class="logo" src="img/logo.svg"/>
					<span class="navi">门店</span>
					<span class="navi">我的账户</span>
					<span class="navi">菜单</span>
         替换点//要在同一行显示也可把span标签替换为ul>li标签要注意li为区块标签须在选择器转换dispaly：inline-bock内联区块元素
                 //可显示行高大小
                 //span标签作css定义使用
                                </div>
				<div class="wholepart1line">
					<a href="">茶瓦纳™</a>
          记忆点//超链接文字带线需去除：text-decoration：none；
                                </div>
			</div>
			<div class="wholepart2">
				<div class="wholepart2-1st">
					
				</div>
				<div class="wholepart2-2nd">
					<div>
					    <p class="p1" >茶瓦纳™</p>
					    <p class="p2" >红茶拿铁(热/冷)</p>
					    <p class="p3" >
						      优质红茶在蒸奶中慢慢的呈现出温和的口感，以柔和的奶泡锁住茶香，加以经典风味酱。
						      这是红茶与牛奶的对话，优雅品享红茶文化。</p>
					    <p>本饮品不含咖啡。</p>
					</div>
				</div>
			</div>
			<div class="wholepart3">
				<div class="wholepart3-m1">
					
				</div>
				<div class="wholepart3-m2">
					
				</div>
				<div class="wholepart3-m3">
					
				</div>
				<div class="wholepart3-m4">
					
				</div>
				<div style="clear: both;"></div>

    //通用点 加在包含这几个块的父元素的类选择器中：清除浮动的最佳实践
//.clearfix:after {content:"";display:block;声明此空间为区块元素；height:0;visibility:hidden；clear:both;}
     //或者在父元素加上float：left等触发BFC加强边框不会溃缩
                                <div class="wholepart3-p1">
					<span class="intru1" >冰摇红莓黑加仑茶</span>
				</div>
				<div class="wholepart3-p2">
					<span class="intru2">抹茶拿铁（热/冷）</span>
				</div>
				<div class="wholepart3-p3">
					<span class="intru3">茶瓦纳™ 冰摇桃桃绿茶/冰摇桃桃乌龙茶</span>
				</div>
				<div class="wholepart3-p4">
					<span class="intru4">茶瓦纳™ 冰摇柚柚蜂蜜红茶</span>
				</div>
        //绝对定位父元素必须有定位，否则以body为基础进行定位，如果有以父元素定位
                        </div>
		</div>
	</body>
</html>

.whole {
	border: 2px solid red;
	width: 100%;height: 740px;
	}
		
.wholepart1 {
	border: 2px solid blue;
	width: 30%;height: 730px;
	float: left;
	margin-top: 2px;
    }
    
.wholepart2 {
	border: 2px solid blue;
	width: 69%; height: 55%;
	float: left;
	margin-left: 5px;
	margin-top: 2px;
}

.wholepart3 {
	border: 2px solid blue;
	width: 69%; height: 43%;
	float: left;
	margin-left: 5px;
	margin-top: 2px;
	background-color: rgb(240,240,247);
}

.wholepart1title{
	border: 1px solid pink;
	width: 300px;height: 50px;
	margin-left: 30px;margin-top: 30px;
	/*background-image:url(../img/logo.svg);
	background-repeat: no-repeat;
	background-position:0 2px;
	vertical-align: middle;*/
}

.logo {vertical-align: middle;
       width: 40px;height: 40px;}
       
.navi {vertical-align: middle;
       margin-left: 20px;}



/*ul li {display:inline-block;
       margin-left: 20px;}*/
       
.wholepart1line {
	border: 1px solid pink;
	width: 300px;height: 40px;
	margin-top: 300px;
	margin-left: 60px;
}

.wholepart1line a{text-decoration: none;}

.wholepart2-1st{
	border: 1px solid pink;
	width: 49%;height: 400px;
	float: left;
	background-image:url(../img/black-tea-latte.jpg);
	background-repeat: no-repeat;
	background-position:45% 40%;
}

.wholepart2-2nd{
	border: 1px solid pink;
	width: 49%;height: 400px;
	float: left;
	margin-left: 10px;
}

.wholepart2-2nd div{
	border: 1px solid pink;
	width: 450px;height: 250px;
	margin-top: 100px;
	margin-left: 30px;
}


.p1 {margin-bottom: 10px;
     color:rgb(170,40,40);
     font-weight: bold;
     font-size: 15px;}

.p2 {
	font-size:25px ;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 10px;
	letter-spacing: 1px;
	}
	
.p3 {margin-top: 0px;
letter-spacing: 1px;}

.wholepart3-m1{
	float: left;
	border: 1px solid pink;
	width: 120px;height: 120px;
	margin-top: 60px;
	margin-left: 50px;
	background-image: url(../img/blackcurrant-raspberry.jpg);
	background-position:50% 50%;
	background-size: cover;
}

.wholepart3-m2 {
	float: left;
	border: 1px solid pink;
	width: 120px;height: 120px;
	margin-top: 60px;
	margin-left: 20px;
	background-image: url(../img/green-tea-latte.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position:50% 50% ;}
	
.wholepart3-m3 {
	float: left;
	border: 1px solid pink;
	width: 120px;height: 120px;
	margin-top: 60px;
	margin-left: 20px;
	background-image: url(../img/iced-shaken-honey-ruby-grapefruit-black-tea.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position:50% 50% ;}
	
.wholepart3-m4 {
	float: left;
	border: 1px solid pink;
	width: 120px;height: 120px;
	margin-top: 60px;
	margin-left: 20px;
	background-image: url(../img/iced-shaken-peach-green-tea.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position:50% 50% ;}
	
.intru1 {
	float: left;
	border: 1px solid pink;
	width: 120px;height: 100px;
	margin-top: 10px;
	margin-left: 50px;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
}

.intru2 {
	float: left;
	border: 1px solid pink;
	width: 120px;height: 100px;
	margin-top: 10px;
	margin-left: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
}

.intru3 {
	float: left;
	border: 1px solid pink;
	width: 120px;height: 100px;
	margin-top: 10px;
	margin-left: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
}

.intru4 {
	float: left;
	border: 1px solid pink;
	width: 120px;height: 100px;
	margin-top: 10px;
	margin-left: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 17px;
}