web应用开发学习——CSS利用

最新推荐文章于 2024-08-02 18:01:26 发布

原创

最新推荐文章于 2024-08-02 18:01:26 发布 · 960 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html #css3

本文深入探讨了CSS的基本用法，包括行内样式、内嵌式、链接式和导入式，并介绍了浮动技术、定位技术及display属性。通过一系列实验，如创建HTML文档、设置各种元素样式和布局，详细展示了如何利用CSS实现网页美化和布局设计，涵盖了table+css、div+css、html5布局等多种布局方式。

一、学习内容

充分理解并掌握CSS基本用法，了解四种CSS样式应用的方法，包括行内样式、内嵌式、链接式以及导入式。学习并应用与布局密切相关的技术，例如浮动技术和定位技术，以及display、block、inline、table、flex等属性。学习并应用table+css、div+css、html5布局，固定布局、流动布局与弹性布局。

二、实验内容

1.创建一个新的HTML文档，获得一个完整的文档结构。

2.编写css文件定义HTML的显示样式。
（1）设置网页整体高度、图片背景
在这里插入图片描述

（2）利用元素选择器自定义个人主页大标题背景颜色、黑色边框等。
在这里插入图片描述

（3)利用元素选择器自定义链接方框背景颜色、黑色边框、浮动设置为left、设置字体大小、字体等。

在这里插入图片描述

（4）利用元素选择器自定义主页左方导航方框背景颜色、黑色边框、设置字体大小、字体等。

在这里插入图片描述

（5）利用元素选择器自定义主页右边方框背景颜色、黑色边框、设置字体大小、字体等
在这里插入图片描述

（6）利用元素选择器自定义主页右边标题方框背景颜色、黑色边框、设置字体大小、字体等
在这里插入图片描述

（7）利用元素选择器自定义点击链接时的颜色动态效果。

在这里插入图片描述

（8）利用元素选择器自定义footer方框背景颜色、黑色边框、设置字体大小、字体等。
在这里插入图片描述

3.利用链接式应用css。
在这里插入图片描述

在html文件中利用类选择器应用css文件布局html文件，插入学院logo，针对link,vistied、hover、active四种状态对个人主页各部分的索引进行设置。

在这里插入图片描述

在html文件中利用类选择器应用css文件布局html文件，设置左侧布局栏。并在其中插入header和内容。

在这里插入图片描述

在html文件中利用类选择器应用css文件布局html文件，设置个人简介栏。插入图片float设置为left，插入文字简介。

在这里插入图片描述

在html文件中利用类选择器应用css文件布局html文件，利用li设置列表，设置个人经历。

在这里插入图片描述

在html文件中利用类选择器应用css文件布局html文件，利用li设置列表，设置学习经历。
在html文件中利用类选择器应用css文件布局html文件，设置footer。

在这里插入图片描述

三、完整代码

/*构建整体框架,设置背景图片*/
body{
   
   
		height: 2000px;
		padding:5%;	
		background-image: url(back.jpg);
	}

/*设置主页*/
.container{
   
   
		width:79%;	
		margin: 0 auto;
		border:1px solid black;
	}
.header{
   
   
	background-color:rgb(63, 64, 165);
	padding: 80px;
	border:1px solid black;
	}
	
	.header-content1{
   
   
		background-color:darkred;
		padding: 10px;
		margin: 5px;
		border:1px solid black;
		float:left;
		font-size: 30px;
		font-weight: bold;
	}
	
	.sidebar{
   
   
		text-align: center;
        float:left;
        position: absolute;
        border:1px black solid;
        background-color: rgb(164, 200, 123); 
        height: 1500px;
		width: 17%;
		border:1px solid black;
	}
	
	.main{
   
   
		height:70%;	
		background-color: rgb(164, 200, 123);
		border:1px solid black;
	}
    .content{
   
   
        height: 1500px;
        float: right;
		width: 75%;
		background-color