大学IT类社团主页

最新推荐文章于 2021-07-29 20:09:18 发布

sunnyboysix

最新推荐文章于 2021-07-29 20:09:18 发布

阅读量1.3k

点赞数

分类专栏：前端开发文章标签： HTML+CSS 盒子模型开发

本文链接：https://blog.csdn.net/sunnyboysix/article/details/77175836

版权

前端开发专栏收录该内容

47 篇文章 1 订阅

订阅专栏

在背景的选择上比较的纠结所以就出现了现在的状况，三个背景我个人还是偏向喜欢纯蓝色的因为我喜欢冷色调，我设计的思路首先要体现一个简洁。其次要突出自己的主题，以HELLO WORLD我们认识代码世界为中心然后做一个简单的英文介绍。下面是代码部分：

<body>
		<div class="box">
		<div class="header">
			<ul>
			<li>About</li>
			<li>Login</li>
			<li>Blog</li>
			<li>Introduction</li>
			</ul>
		</div>
		<div class="content">
			<div class="content-top">
                <h9 data-shadow=" Welcome to EndlCode">
                Welcome to EndlCode
               </h9>
			</div>
			<div class="content-bottom">
				<div class="content-bottom-left">
					<div class="box1">
						<p>When you first saw the first line of code, you didn't understand anything.</p>
				        <br>
				        <p class="box1-1">By learning</p>
				        <br>
				        <p>Next, you learned to explore the fun of the computer world.</p>
					</div>
				</div>
				<div class="content-bottom-middle">
					<div class="box2">
						<ul>
							<li><a>Hello World</a></li>
						</ul>
					</div>
				</div>
				<div class="content-bottom-right">
					<div class="box3">
						<p>If you are a newcomer to the computer,<br>
                         Or do you want to learn new techniques?,<br>
                         Or would you be interested in joining our club?.
						</p>
						<br>
						<li class="box3-3">
							<a href="#">Contact us</a>
						</li>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">CopyRight  2017 EndlCode all right reserved</div>
		</div>
	</body>

本来想用BOOTSTRAP来写这个界面，后来自己想想还是用HTML加CSS解决，当然我觉得自己写的还是不错的，简介在一定的程度上符合大学中IT类社团的设计。

主要用的是盒子：整个页面分为三大块，在CONTENT部分又分为两块，我觉得这种写法在一定的程度上比使用框架使比较麻烦的，但是这是基本功吧如果这种纯CSS写法掌握的很好像前端的Vue ANGLAR这些框架都是很好理解的，一步一个脚印。接下来自己也会继续学习前端的框架内容，如果有写的自己觉得比较好的网页自己会贴出来，加油。

下面分享一下自己写的CSS，如果是初学者可以自己看一看。

body{
	background-image: url(../images/1.jpeg);
}
.box{
	width: auto;
    height: 650px;
}
.header{
	height: 50px;
	font-family:"arial black";
	font-size: 20px;
	color:#46B8DA;
}
.header ul{
	list-style: none;
}
.header ul li{
	float: right;
	margin: 10px;
}
.content{
	height: 570px;
}
.content-top{
	height: 100px;
/*	background-color: blueviolet;*/
	text-align: center;
	font-size: 20px;
	font-family:"bookman old style";
}
.content-bottom{
	height: 470px;
	width: 1350px;
}
.content-bottom-left{
	margin-left: 100px;
	width: 350px;
	height: 470px;
	float: left;
}
.content-bottom-middle{
	width:450px;
	height: 470px;
	float: left;
}
.content-bottom-right{
	margin-right: 100px;
	width:350px;
	height: 470px;
	float: right;
}
.box1{
	width: 300px;
	height: 420px;
	position: absolute;
	font-size: 28px;
	color:#46B8DA;
	font-family:"gill sans mt";
    font-style:italic;
}
.box1-1{
	text-align: center;
}
.box2{
	width:400px;
	height: 420px;
	position: absolute;
}
.box2 ul{
	list-style: none;
}
.box2 ul li{
	text-align: center;
	font-size: 80px;
	color:#46B8DA;
	margin-top: 50px;
	margin-left: 25px;
	margin-right: 50px;
}
.box2 ul li a{
	text-decoration:none;
	font-family:"微软雅黑";
	font-style: oblique;
}
.box3{
	width: 300px;
	height: 420px;
	position: absolute;
	color:#46B8DA;
	font-family:"gill sans mt";
    font-style:italic;
    font-size: 29px;
}
.box3-3{
	text-align: center;
	list-style: none;
}
.box3-3 li a{
	text-decoration: none;
}
.footer{
	height: 30px;
	font-family:"arial black";
	font-size: 20px;
/*	color:palegoldenrod;*/
	text-align: center;
	color:#46B8DA;
	color:#46B8DA;	font-family:"gill sans mt";
    font-style:italic;

}

因为这个网页的设计不是很难，就是自己即兴写的。