首页 > 代码库 > css
css
今天学习了很多的知识，理解和记忆的东西都很多。昨天老师布置了一个作业，回来用css做一个网页，现在不用表格做网页了，现在用css。知识点今天不整理了，都整理在笔记本和电脑上了，从回来就开始写作业，写了好久。下面是自己练习的东西，做一下记录：
opacity:0.5; 透明度
border-radius:10px;圆角
border-bottom-left-radius:10px; 左下角成圆角10像素
border-bottom-right-radius:20px; /*右下角成圆形20像素
代码练习：
#d1{
width: 200px;
height: 200px;
background-color: red;
color: white;
margin: 10px 10px 0px 10px;
padding: 20px;
z-index: ;
margin-bottom: 0px;
overflow:hidden;
visibility: visible; hidden
display: block; none
}
#d2{
margin-top: -40px;
margin-left: 40px;
width: 200px;
height: 200px;
background-color: blue;
color: white;
overflow: hidden;
opacity: 0.4;
border-bottom-left-radius: 50px;
border-bottom: 10px solid black;
text-shadow: 2px 2px 0px wheat;
}
#d1-1{
width: 50px;
height: 50px;
background-color: green;
margin: -30px 0px 0px 0px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d1-1">
</div>
</div>
<div id="d2">
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
</div>
下面是做的作业：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0;
padding:0;
}
#out-top1 {
width:100%;
height:70px;
/*border:1px solid black;*/
background-color:red;
font-size:40px;
color:white;
text-indent:73px;
line-height:70px;
}
#up{
width:40%;
height:68px;
/*border:1px solid black;*/
right:0px;
font-size:25px;
position:absolute;
text-indent:120px;
}
#out-top2{
width:100%;
height:40px;
/*border:0px solid black;*/
background-color:lavender;
}
#wenzi {
width: 33%;
height: 38px;
/*border: 1px solid black;*/
right: 0px;
position: absolute;
line-height: 38px;
text-indent: 75px;
font-size: 1px;
line-height: 38px;
}
#wenzi1 {
width: 55%;
height: 38px;
/*border: 1px solid black;*/
left: 0px;
position: absolute;
line-height:38px;
text-indent:75px;
font-size:15px;
}
.out-top3 {
width:100%;
height:4000px;
/*border:1px solid black;*/
}
.out-top4 {
width:1200px;
height:3000px;
/*border:1px solid black;*/
margin:0px auto;
margin-top:20px;
}
.in-center1 {
width:1200px;
height:400px;
/*border:1px solid black;*/
background-image:url(img/113.jpg.jpg);
}
.in-center2 {
width:600px;
height:100px;
/*border:0.5px solid black;*/
margin:20px 0px 0px 15px;
background-color:white;
opacity:0.5;
text-indent:20px;
background-position:top 20px bottom 50px;
}
.in-center3 {
width:1200px;
height:70px;
/*border:0.5px solid black;*/
font-size:20px;
vertical-align:top;
padding-top:-50px;
}
.in-center4 {
width:1200px;
height:250px;
/*border:0.5px solid black;*/
}
.in-center4-1 {
width:280px;
height:220px;
/*border:0.3px solid black;*/
float:left;
margin:15px 0px 15px 15px;
border-top:0.1px solid black;
}
.in-center4-2 {
width:280px;
height:220px;
/*border:0.3px solid black;*/
float:left;
margin:15px 0px 15px 15px;
border-top:0.1px solid black;
}
.in-center4-3 {
width:280px;
height:220px;
/*border:0.3px solid black;*/
float:left;
margin:15px 0px 15px 15px;
border-top:0.1px solid black;
}
.in-center4-4 {
width:280px;
height:220px;
/*border:0.3px solid black;*/
float:left;
margin:15px 0px 15px 15px;
border-top:0.1px solid black;
}
.in-bottom1 {
width:1200px;
height:110px;
/*border:0.3px solid black;*/
margin:20px 0px 0px 0px;
}
.in-bottom3 {
width:1200px;
height:110px;
/*border:0.3px solid black;*/
}
.in-bottom2 {
width:1200px;
height:400px;
/*border:1px solid black;*/
}
.in-bottom2-1{
width: 350px;
height: 320px;
/*border: 1px solid black;*/
float: left;
margin: 0px 23px 0px 23px;
}
.in-bottom2-1-1 {
width: 350px;
height: 30px;
/*border: 1px solid black;*/
margin-top:289px;
}
.in-bottom2-2{
width: 350px;
height: 320px;
/*border: 1px solid black;*/
float: left;
margin: 0px 23px 0px 23px;
}
.in-bottom2-2-1 {
width: 350px;
height: 30px;
/*border: 1px solid black;*/
margin-bottom:289px;
}
.in-bottom2-2-2 {
width: 350px;
height: 110px;
/*border: 1px solid black;*/
margin-top:-290px;
position:absolute;
}
.in-bottom2-2-3 {
width: 350px;
height: 80px;
/*border: 1px solid black;*/
margin-top:-178px;
position:absolute;
}
.in-bottom2-2-4 {
width: 350px;
height: 65px;
/*border: 1px solid black;*/
margin-top:-97px;
position:absolute;
}
.in-bottom2-2-5 {
width: 350px;
height: 30px;
/*border: 1px solid black;*/
margin-top:-30px;
position:absolute;
}
.in-bottom2-3 {
width: 350px;
height: 320px;
/*border: 1px solid black;*/
float: left;
margin: 0px 23px 0px 23px;
}
.in-bottom2-3-1 {
width: 100px;
height: 127px;
/*border: 1px solid black;*/
margin-top:0px;
position:absolute;
background-image:url(img/119.jpg);
}
.in-bottom2-3-2 {
width: 249px;
height: 316px;
/*border: 1px solid black;*/
margin-top: 0px;
position: absolute;
margin-left:100px;
}
.in-bottom4 {
width:1200px;
height:300px;
/*border:1px solid black;*/
}
.in-bottom4-1,.in-bottom4-2,.in-bottom4-3,.in-bottom4-4,.in-bottom4-5,.in-bottom4-6 {
width:165px;
height:200px;
/*border:1px solid black;*/
margin:35px 15px 35px 17px;
float:left
}
.in-bottomone {
width:100%;
height:120px;
/*border:1px solid black;*/
background-color:red;
}
.in-center4-1-1 {
width:280px;
height:146px;
/*border:0.3px solid black;*/
background-image:url(img/114.jpg);
}
.in-center4-1-2 {
width:280px;
height:70px;
/*border:0.3px solid black;*/
}
.in-center4-2-1 {
width:280px;
height:146px;
/*border:0.3px solid black;*/
background-image:url(img/115.jpg);
}
.in-center4-2-2 {
width:280px;
height:70px;
/*border:0.3px solid black;*/
}
.in-center4-3-1 {
width:280px;
height:146px;
/*border:0.3px solid black;*/
background-image:url(img/116.jpg);
}
.in-center4-3-2 {
width:280px;
height:70px;
/*border:0.3px solid black;*/
}
.in-center4-4-1 {
width:280px;
height:166px;
/*border:0.3px solid black;*/
list-style-position:inside;
}
.in-center4-4-2 {
width:280px;
height:50px;
/*border:0.3px solid black;*/
}
.in-bottom1-1 {
width:100px;
height:108px;
/*border:0.3px solid black;*/
float:left;
text-align:center;
line-height:108px;
font-size:12px;
}
.in-bottom1-2 {
width:100px;
height:108px;
/*border:0.3px solid black;*/
float:left;
text-align:center;
line-height:108px;
}
.in-bottom1-3 {
width:591px;
height:108px;
/*border:0.3px solid black;*/
float:left;
background-position:left 20px top 20px;
}
.in-bottom1-4 {
width: 400px;
height: 108px;
/*border: 0.3px solid black;*/
float: left;
}
.in-bottom1-4-1{
width: 300px;
height: 70px;
background-image:url(img/118.jpg);
margin-top:20px;
margin-left:70px;
}
.in-bottom1-3-1{
width:591px;
height:54px;
/*border:0.3px solid black;*/
margin-top:30px;
}
.in-bottom3-1 {
width:370px;
height:30px;
/*border:0.3px solid black;*/
margin-top:80px;
position:absolute;
}
.in-bottom3-2 {
width:370px;
height:30px;
/*border:0.3px solid black;*/
margin-left:420px;
margin-top:80px;
position:absolute;
}
.in-bottom3-3 {
width:370px;
height:30px;
/*border:0.3px solid black;*/
margin-left:820px;
margin-top:80px;
position:absolute;
}
.in-bottomone1 {
width:200px;
height:80px;
/*border:0.3px solid black;*/
margin-top:18px;
margin-left:70px;
padding-top:25px;
text-align:center;
}
.in-bottomone2 {
width:600px;
height:80px;
/*border:0.3px solid black;*/
margin-top:-80px;
margin-left:300px;
position:absolute;
}
.in-bottom4-6-1,.in-bottom4-6-2, .in-bottom4-6-3, .in-bottom4-6-4, .in-bottom4-6-5 {
width:165px;
height:37px;
/*border:1px solid black;*/
margin:1px 0px 1px 0px;
text-align:center;
line-height:37PX;
background-color:gray;
border-radius:10px;
}
.in-bottom4-6-1:hover, .in-bottom4-6-2:hover, .in-bottom4-6-3:hover, .in-bottom4-6-4:hover, .in-bottom4-6-5:hover {
background-color: black;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="out-top1">
<div id="up">
web<input type="radio" name="1"id="wed" value="http://www.mamicode.com/2" checked="checked" />
people<input type="radio" name="1" value="http://www.mamicode.com/3" />
<input type="text" name="xyz" placeholder="search web or people"/>
</div>
Stanford University
</div>
<div id="out-top2">
<div id="wenzi1">About Stanford Admission Academics Research Campus Life</div>
<div id="wenzi">STUDENTS   FACULTY/STAFF   PARENTS   ALUMNI</div>
</div>
<div class="out-top3">
<div class="out-top4">
<div class="in-center1">
<div class="in-center2">
<div><h3><label style="color:red">#NextGreatDiscovery</label></h3></div>
<h5><span> Many of today‘s greatest innovations are built on the shoulders of fundamental<br />
research conducted decades ago.</span></h5>
</div>
</div>
<div class="in-center3">Top Stories<hr /></div>
<div class="in-center4">
<div class="in-center4-1">
<div class="in-center4-1-1"></div>
<div class="in-center4-1-2">
<h4> Optimal dosing</h4><h6>Stanford engineers create experimental technology to monitor and maintain drug levels in the body.</h6>
</div>
</div>
<div class="in-center4-2">
<div class="in-center4-2-1"></div>
<div class="in-center4-2-2">
<h4>Experts on demand</h4><h6> Stanford researchers develop crowdsourcing software to convene rapid, on-demand flash organizations.</h6>
</div>
</div>
<div class="in-center4-3">
<div class="in-center4-3-1"></div>
<div class="in-center4-3-2">
<h4> Real-life scenarios</h4><h6>‘Humbling‘ hospital simulations inspire Stanford graduate students to solve problems in health care delivery.</h6>
</div>
</div>
<div class="in-center4-4">
<div class="in-center4-4-1">
<h5>MORE HEADLINES</h5>
<ul type="disc">
<li>Scientists crowdsource autism data to learn where resource gaps exist</li>
<li>Study finds first possible drug treatment for lymphedema</li>
<li>Report details universities‘ efforts on sexual assault</li>
</ul>
</div>
<div class="in-center4-4-2">
MORE NEWS
</div>
</div>
</div>
<div class="in-bottom1">
<div class="in-bottom1-1">11 MIN.AGO</div>
<div class="in-bottom1-2"> @Stanford</div>
<div class="in-bottom1-3">
<div class="in-bottom1-3-1">
.@StanfordMed‘s Caitlin O‘ Connell-Rodwell has shown the potential for elephant-inspired vibrational hearing aids. stanford.io/2q3nFDS-->
</div>
</div>
<div class="in-bottom1-4">
<div class="in-bottom1-4-1"></div>
</div>
</div>
<div class="in-bottom3">
<div class="in-bottom3-1">At Stanford<hr /></div>
<div class="in-bottom3-2">Events<hr /></div>
<div class="in-bottom3-3">Athletics<hr /></div>
</div>
<div class="in-bottom2">
<div class="in-bottom2-1">
<div class="in-bottom2-1-1"> MORE SITES</div>
</div>
<div class="in-bottom2-2">
<div class="in-bottom2-2-1">
MAY Bike to Work Day at Stanford </div>
<div class="in-bottom2-2-2"> Creativity on the Line: Design for the Corporate World, 1950–1975<br /><h6>through August 21, 2017</h6></div>
<div class="in-bottom2-2-3"> 2017 Oksenberg Lecture - Ambassador Max Baucusz<br /><h6>3:00 PM</h6></div>
<div class="in-bottom2-2-4"> Stanford Medicine Dean‘s Lecture Series: Thomas Pike<br /><h6>5:00 PM</h6></div>
<div class="in-bottom2-2-5"> EVENT CALENDAR</div>
</div>
<div class="in-bottom2-3">
<div class ="in-bottom2-3-1"></div>
<div class="in-bottom2-3-2">Leading the way<br /> Stanford was well<br /> represented with 14<br /> athletic programs earning<br /> perfect 1,000 multi-year<br /> scores in the Academic<br /> Progress Rate statistics<br /> issued by the NCAA.
<br /><br /><br /><br /><br /><br /><br /> GOSTANFORD.COM
</div>
<div class="in-bottom2-3-3"></div>
</div>
</div>
<div class="in-bottom4">
<div class="in-bottom4-1"><h5><label style="color:red">SCHOOLS</label><br />Business<br />Earth, Energy & Environmental Sciences<br />Education<br />Engineering<br />Humanities & Sciences<br />Law<br />Medicine</h5></div>
<div class="in-bottom4-2"><h5><label style="color:red">DEPARTMENTS</label><br />Departments A - Z<br />Interdisciplinary Programs<br /><br /><br /><label style="color:red">RESEARCH</label><br />Research Centers A - Z<br />Interdisciplinary Research<br />Libraries</h5></div>
<div class="in-bottom4-3"><h5><label style="color:red">HEALTH CARE</label><br />Stanford Health Care<br />Stanford Children‘s Health<br /><br /><br /><label style="color:red">ONLINE</label> LEARNING<br />Stanford Online</h5></div>
<div class="in-bottom4-4"><h5><label style="color:red">ABOUT STANFORD</label>><br />Facts<br />History<br />Accreditation<br /><br /><br /><label style="color:red">ADMISSION</label><br />Undergraduate<br />Graduate<br />Financial Aid</h5></div>
<div class="in-bottom4-5"><h5><label style="color:red">RESOURCES</label><br />A - Z Index<br />Campus Map<br />Directory<br />Stanford Profiles<h5></h5></div>
<div class="in-bottom4-6">
<div class="in-bottom4-6-1">Apply</div>
<div class="in-bottom4-6-2">VisitCampus</div>
<div class="in-bottom4-6-3">MakaGift</div>
<div class="in-bottom4-6-4">FingaJob</div>
<div class="in-bottom4-6-5">ContactUS</div>
</div>
</div>
<div class="in-bottomone">
<div class="in-bottomone1"><label style="color:white"><label style="font-size:30px;"> Stanford</label> <br /> University</label></div>
<div class="in-bottomone2"><label style="color:white">Stanford Home Maps & Directions Search Stanford Emergency Info<br />
Terms of Use Privacy Policy Copyright Complaints Trademark Notice<br />
? Stanford University. Stanford, California 94305.</label></div>
</div>
</div>
</div>
</body>
</html>
从开始学到这里才像老师说得那样，这个东西越来越有趣了，思想很重要，你的想法越好越会让你少走弯路。好累的一天，完成了作业，不知不觉真的忘记了吃中午饭，加油吧!自己选择的不要让自己后悔。
css