CSS运用中所体会到的方法

通过自己对CSS的运用，尝试编写了网页，在编写和学习过程中对CSS的布局有了更加深刻的理解，一般来说，通过一个div标签来将一个模块的内容限定在div标签范围内，再在标签内添加所需要的元素。

通过外部css的调取能够使结构更加清晰，便于修改和添加

在浏览器内调节标签的margin和padding可以更加直观的看到位置的改变，当到达合适位置后再对css文件中的数值进行调整。

当多个标签需要用到相同的格式时，可以对一个标签设置多个class名，从而进行一类标签的同时修改。

在编写网页之前，需要对网页有个整体的规划，不然做出来的网页就会十分的混乱，并且可以通过对背景颜色的设置来帮助自己更好的对标签位置进行判断

margin和padding的区别：

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距）

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。（内边距）

基本结构代码如下

HTML:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>题库管理系统</title><!-- 网页描述 --><metaname = "description"content="题库管理系统！！！"/><!-- 网页关键词 --><meta name="keywords" content="题库管理系统，试卷生成"><!-- ico图标 --><link rel="shortcut icon" href="R-C.ico" type="image/x-icon"><!-- css引入 --><link rel="stylesheet" href="base.css"><link rel="stylesheet" href="common.css"><link rel="stylesheet" href="index.css">
</head>
<body><!-- 头部 --><header><!-- 快捷菜单按钮 --><div class="web-short"> <!-- 版心的盒子 --><nav class="container"><ul class="fr"><li><a href="">功能1</a>|</li><li><a href="">功能2</a>|</li><li><a href="">功能3</a>|</li><li><a href="">功能4</a>|</li><li><a href="">功能5</a>|</li><li><a href="">功能6</a></li></ul></nav></div><!-- 主导航模块 --><div class="web-main container"><!-- 图标 --><h1 class="logo fl"><!-- 通过点击logo回到主页面 --><a href="#">题库管理</a></h1><!-- 导航 --><nav class="fl"><ul><li><a href="#">导航1</a></li><li><a href="#">导航2</a></li><li><a href="#">导航3</a></li></ul></nav><!-- 搜索 --><div class="search fl"><input type="search" placeholder="搜索"></div></div></header><!-- 主题内容 --><div class="texts" style="padding: 150px 50px 50px 50px;"><p></p><p></p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p>内容内容内容</p><p></p><p></p></div><footer><!-- 底部内容 --><div class="bottom"><div class="container"><a href="#">内容1</a><a href="#">内容2</a><a href="#">内容3</a></div></div><!-- 版权信息 --><div class="right"><div class="container"><p><a href="#">关于我们</a> |<a href="#">服务条款</a> |<a href="#">帮助中心</a> |<a href="#">客服</a> |</p><p style="color: gray;">@吸吸吸吸</p></div></div></footer>
</body>
</html>

登录页面

（头部和尾部代码相同，只放了中间部分的代码，）

<!-- 登录页面 --><div class="top-banner"><span class="photo">爷爷的图图呢</span></div><div class="logincon container"><div class="top-pic"></div><div class="title-line"><span class="tit">题库系统登录 </span></div>    <div class="login"><!-- 登陆 注册input框 --><div class="inputbox"> <!-- username --><div class="username-box"><div class="clearfix"></div><input type="text" value placeholder="请输入你的账号" id="login-username" maxlength="50" autocomplete="off"><div class="clearfix"></div></div><!-- password --><div class="password-box"><div class="clearfix"></div><input type="password" placeholder="密码" id="login-password"><div class="clearfix"></div></div></div><!-- 登录按钮 --><div class="btn-box"><a class="btn btn-login">登录</a><a href="#" class="btn btn-reg">注册</a></div></div></div>

common.css(两个部分引用的同一个css文件)

/* 版心公共类 */
.container {width: 1300px;margin: 0 auto;
}div {display: block;
}
/*******************************************************/
/*************************快捷菜单按钮*******************/
/*******************************************************//* 快捷按钮 web-short*/
.web-short {height: 52px;background-color: #a04c4c;}
/* 版心的位置->白色表示 */
.web-short .container {height: 52px;/* width: 1000px; *//* background-color: #fff; */
}.web-short ul li {float: left;line-height: 52px;color: gray;
}.web-short ul a {margin: 0 20px;color: #fff;font-size: 15px;
}
.web-short ul a:hover {color: aqua;border-bottom: 1px solid aqua;padding-bottom: 5px;
}/* 想找到其中某一个a标签来进行操作:最后一个a标签的右边margin设置为0*/
/*
.web-short li:last-child a {margin-right: 0;
}
*//* 在元素前添加图标，使用伪元素 */
.web-short li:last-child a::before {content: '';/*伪元素必需要有的*/display: inline-block;width: 11px;height: 16px;margin-top: -5px;margin-right: 8px;background-color: blue;/* background: url('./images/jingling')-160px -70px;精灵图坐标 *//* 对齐方式：居中对齐 */vertical-align: middle;
}/*******************************************************/
/***********************主导航:web-main***************/
/*******************************************************/.web-main{height: 130px;background-color: skyblue ;padding-top: 25px;box-sizing: border-box;}.web-main .logo{width:200px ;height: 80px;background-color: #fff;margin-left: 20px;
}
.web-main .logo a{display: block;height:80px;background: url(./R-C.ico);background-size: 100% 100%;font-size: 0;
}.web-main nav li {float: left;height: 70px;line-height: 70px;margin: 0 40px;
}
.web-main li:first-child a {margin-left: 20px;
}
.web-main nav a:hover {color:aqua;border-bottom: 1px solid aqua;padding-bottom: 5px;
}.web-main .search {position: relative;width:170px;height: 30px;background-color: yellow;margin-top: 20px;margin-left: 40px;
}
.web-main .search input {width: 170px;height:30px;border-bottom: 1px solid gray;padding-left: 30px;
}/* 在搜索框中添加放大镜 */
.web-main .search::before {content: '';position:absolute;top: 5px;left:3px;/* display: block; */height: 18px;width: 18px;background: url('./R-C.ico');/*也要采用精灵图*/background-color: pink;
}/*******************************************************/
/********************login******************************/
/*******************************************************/
/* top-banner可以在登陆系统上面放些图片 */.top-banner {height: 86px;width: auto;margin-bottom: 28px;background-color: #63ceee;text-align: right;font-size: 34px;padding-right: 5px;
}
.top-banner .photo {text-align: center;margin-right: 35px;
}.login{/* height: 1500px; */background-color: pink;padding-left: 445px;box-sizing: border-box;padding-bottom: 130px;padding-top: 40px;
}
/******************* 登录标题 ****************/
.title-line {width: auto;height: 28px;margin: 5px 257px 28px;padding-right: 0px;border-bottom: 1px solid rgb(179, 176, 176);/* margin-bottom: 28px; */text-align: center;
}.title-line .tit{height: 56px;width: 56px;margin: 20px;padding: 0;font-size: 38px;/* background: #fff; */text-align: center;
}
/******************* 输入用户名 *******************/
.login .username-box {height: 50px;width: 414;
}.login .username-box input {box-sizing: border-box;width: 415px;font-size: 15px;padding: 10px;height: 40px;vertical-align: middle;border-radius: 4px;background-color: rgb(195, 195, 207);margin-bottom: 20px;
}.login .clearfix {height: 20px;width: 350px;/* margin-bottom: 50px; *//* padding-bottom: 50px; */
}/******************* 密码框 ******************/
.login .password-box input {box-sizing: border-box;width: 415px;font-size: 15px;padding: 10px;height: 40px;vertical-align: middle;border-radius: 4px;background-color: rgb(165, 165, 192);}/************** 登录按钮 ****************/
.login .btn-box {display: flex;flex-direction: row;
}.login .btn-box .btn{display: inline-block;height: 36px;border-radius: 4px;width: 184px;line-height: 38px;font-size: 14px;text-align: center;cursor: pointer;margin-bottom: 50px;
}.login .btn-box .btn-login {border: 1px solid skyblue;color: #fff;background-color: skyblue;margin-bottom: 10px;margin-right: 40px;
}.login .btn-box .btn-login:hover {background-color: #3ec0e7;border-bottom: 1px solid #333;
}
/****************** 注册按钮*************************** */
.login .btn-box .btn-reg{border: 1px solid skyblue;color: #fff;background-color: #333;margin-bottom: 10px;margin-right: 40px;
}
.login .btn-box .btn-reg:hover {background-color: rgb(114, 111, 111);
}/*******************************************************/
/******************* footer***************************/
/*******************************************************/.bottom {height: 50px;background-color: #333;
}.bottom .container {width: 1395px;height:123px;border-bottom: 1px solid #434343;background-color: pink;
}.bottom .container a {float: left;width: 33.33%;height: 80px;background-color: skyblue;text-align: center;font-size: 25px;line-height: 80px;
}/******************right***************************/.right {height: 115px;background-color: #333;
}.right .container {height: 105px;padding-top: 45px;box-sizing: border-box;background-color: pink;text-align: center;
}.right .container a:hover{border-bottom: 1px solid #333;
}

CSS运用中所体会到的方法相关推荐

仿宋小二在html中怎么设置,CSS 网页中正确设置字体的方法 - 文章教程
现在的 PC 网站中,大多数都是使用的微软雅黑字体,Windows 7 自带了微软雅黑字体,而一些浏览器一般默认也是使用的这种字体,所以即使你不设置默认字体,多数浏览器的用户体验也基本一致,但是总是有 ...
在DIV+CSS排版中新闻列表的制作方法
最终效果: 2005年5月30日新闻标题01 2005年5月30日新闻标题02 2005年5月30日新闻标题03 2005年5月30日新闻标题04 CSS代码: .list{ margin: ...
html新闻排版制作代码,在DIV+CSS排版中新闻列表的制作方法_CSS/HTML
CSS代码:.list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0px ...
在CSS布局中max-width 无效的解决方法
max-width 无效的解决方法: width:100% 和 max-width:100%的区别: width: 100%是将所有指定元素的宽度拉伸或收缩到和父元素的宽度一致, 而max-widt ...
php两个按钮左右怎么做,css布局两个button在同父标签中左右两侧分布的方法
本文主要介绍了css布局两个button在同父标签中左右两侧分布的方法,分享给大家,具体如下: 效果图布局代码提交重置 style="float:right;width:50%&quo ...
css规则可以放在云上,CSS中!important规则的使用方法
CSS中!important规则的使用方法发布时间:2020-06-15 10:53:11 来源:亿速云阅读:129 作者:Leah 这期内容当中小编将会给大家带来有关CSS中!important ...
html中的透明度怎么设置,css透明度怎么设置？css中各种透明度的设置方法总结...
本篇文章给大家介绍一下css中透明度的设置方法,下面我们就来看看具体的内容. 不透明度和透明度根据定义,CSS中的不透明度和透明度定义了元素的可见性,无论是图像,表格还是RGBA(红绿蓝alpha) ...
css中style怎么用,css中style标签的使用方法
css中style标签的使用方法发布时间:2020-07-01 09:49:22 来源:亿速云阅读:141 作者:Leah 这篇文章将为大家详细讲解有关css中style标签的使用方法,文章内容质 ...
html怎么边调试边显示出来,网页设计中CSS布局调试的十个有效的方法
网页设计中CSS布局调试的十个有效的方法在网站设计中CSS布局是很重要的局部.下面小编给大家分享的是学习网页设计中CSS布局调试的十个有效的方法 ,在这里详细的介绍了学习网页设计中CSS布局调试的十 ...
学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法一.行高(line-height)法二.内边距(padding)法三.模拟表格法四.CSS3的transform来实现五:css3的box方法实 ...

CSS运用中所体会到的方法

CSS运用中所体会到的方法相关推荐

最新文章

热门文章