CSS运用中所体会到的方法

最新推荐文章于 2024-05-10 16:46:02 发布
最新推荐文章于 2024-05-10 16:46:02 发布
阅读量567 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jenny_ghost/article/details/121737959
版权

通过自己对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>

    <!-- 网页描述 -->
    <meta
        name = "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;
}

Jenny_Ghost
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
保存CSS中的图片的几种方法
12-04
打开css找出里面的图片一个一个下载 第二：偷懒型 保存到本地css后，在dw中把css中的图片都替换成　第三：超级偷懒型 找一个动网论坛，找到发帖按钮。然后把css复制进去预览。。[适合css中带网址的图片连接，] 暂时...
使用CSS的一些心得
xufang461010923的专栏
03-26 704
在网页中，CSS是不必不可少的，下面是我使用CSS的一些心得体会，分享给大家，目前就先写这一条，其他的不记得记录在哪了，后期找到再补充啊！ 1、使用CSS布局时，最好只做单纯的布局，不要设置布局元素的内外间距；这个主要是因为，在布局不变的情况下，其内部的元 素可能会发生改变，而这元素的改变可能会导致内外边距的变动。 此时若这些边距是由被更改元素设置的，那么很好处理，替换元素重新设置即可；...
CSS的工程化 + CSS 方法论
hualala_32的博客
05-15 751
CSS工程化 CSS 是 Web 开发中不可或缺的一部分，在前端工程化不断进步的今天，一方面， CSS 特性随着规范的升级越来越丰富，另一方面，前端业务复杂性性的增加带来的工程愈加庞大，驱使着开发者不断寻找 CSS 工程化的最佳实践。因此，CSS 工程化就顺应而生，主要是为了解决在使用标准 CSS 时遇到的各种难点。 在使用CSS时遇到的难点 class命名难，经常把各种名字都想了个遍，为了不重复也是很拼了。 选择器的全局污染问题，经常改了一个地方的样式，影响到很多地方。 样式难以复用，没有办法像 JS
CSS学习心得
weixin_47223561的博客
03-30 1678
CSS一、CSS简介二、CSS语法1.id 选择器2.class 选择器三、CSS的应用1、外部样式表2、内部样式表3、内联样式四、颜色、尺寸、对齐五、CSS文档分析1、盒子模型2、边框与边距3、定位4、溢出 overflow5、浮动 float6、不透明度7、组合选择器总结 一、CSS简介 CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是
HTML&CSS学习总结
m0_57872839的博客
07-09 361
html，css新手入门
HTML+CSS学习总结
weixin_53351919的博客
06-26 2648
html+css学习总结
CSS中浮动和定位的总结
IT晓可程序员之路
06-03 1433
CSS中浮动和定位总结
关于CSS样式的一些应用体会
iteye_16421的博客
05-26 95
将层设置在肯定位置position:absolute;bottom:0;left:0 超过隐藏width:682px;height:325px;overflow:hidden 设定背景图片的位置： .imgC li {cursor: pointer;height:20px; width:18px;float:left;display:inline-block;*display:inl...
DW中css样式的概念,dreamweaver中CSS样式的应用教案.doc
weixin_39931101的博客
08-03 456
《dreamweaver中CSS样式的应用》教案上海市城市科技学校 金卫萍一、教学目标：知识与技能目标理解CSS样式的功能，掌握三种类型样式的操作，掌握样式表的导出和链接来设计网站中的所有网页。能力目标培养学生的思维能力和观察感受能力；培养学生CSS样式的实践应用能力。情感目标培养学生的探究和实践精神，以及善于思考总结，综合应用技能的能力。二、教学重点：运用三种类型的样式设计网页。掌握样式表的导...
深入CSS结构：合理运用div和span
html基础教程
02-21 761
特意上网搜索了一下，关于div，说法很多。 　　把div看成是布局元素这种观点我想是最多的，类似有“用div代替table进行布局”、“实战CSS+DIV布局”等等等等，太多了，还有不少人延用Dreamweaver的定义，称div为层，按Photoshop的层的概念来使用……有朋友干脆就直接称div和span为辅助布局元素。 　　怎么说呢？虽然我很想说对div类似的这种认识是错误的，div不是...
CSS中垂直居中的简单实现方法
12-13
大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了，但是垂直居中却没有相应的css属性来设置，...CSS Code复制内容到剪贴板 .center-vertical { position: relative; top: 50%; t
css中的clear属性使用方法实例介绍
09-25
本文介绍css中的clear属性使用方法，大家参考使用吧
CSS在Dreamweaver中无效的解决方法
09-24
很多朋友在使用Deamweaver8的时候都会遇到这样的情况：给当前编辑的文档链接了CSS文件，并对页面元素应用了定义的CSS样式，但在DW8中却看不到任何效果。如下图。 主要原因就是DW8新多出了一个“样式呈现工具栏”，该...
网页中css四种链接引用方法浅谈
12-10
link href="/site.css" rel="stylesheet" type="text/css" /> 　<%–第二种方法–%> 　<link href="site.css" rel="stylesheet" type="text/css" /> 　<%–第三种方法–%> 　<link href=...
HTML_CSS学习：定位
m0_74972727的博客
05-06 542
【代码】HTML_CSS学习：定位。
CSS学习笔记之中级教程（一）
最新发布
wz_1992的博客
05-10 746
1、CSS 布局 - display 属性 1.1 display 属性 display 属性是用于控制布局的最重要的 CSS 属性。 display 属性规定是否/如何显示元素。 每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。 1.2 块级元素（block element） 块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。 会占领页面的一行，其后多个block元素
CSS 样式清单整理：文字超出部分显示省略号和设置placeholder的字体样式
weixin_44487537的博客
05-07 199
【代码】CSS 样式清单整理：文字超出部分显示省略号。
CSS基础(盒子模型、浮动、定位)
eh的博客
05-08 991
元素可以左浮动右浮动这样可以打破元素原本只能上下排列的形式，且元素于元素之间没有间隙，是紧挨着的。利用position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。其中子元素应在父元素范围内排列，否则容易导致下一个父元素同级元素被遮盖掉，产生。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。浮动可以控制元素排列方向但对于准确到某个位置却不好控制，这时我们可以使用定位。clear 属性指定元素两侧不能出现浮动元素。，该属性其设置了元素溢出时所需的行为，使用。
css中!Important的使用方法
06-09
在 CSS 中，!important 是一个声明的属性值后缀，用于覆盖其他样式规则。当一个样式规则使用了 !important 后缀时，它将覆盖其他普通规则和内联样式。!important 通常用于解决 CSS 样式重叠和优先级问题，但它应该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值