CSS实例练习

最新推荐文章于 2022-12-11 23:44:06 发布
最新推荐文章于 2022-12-11 23:44:06 发布
阅读量835 收藏 7
点赞数 1
分类专栏： Web HTML CSS 文章标签： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36823300/article/details/100920167
版权
Web 同时被 3 个专栏收录
23 篇文章 1 订阅
订阅专栏
HTML
21 篇文章 1 订阅
订阅专栏
CSS
6 篇文章 0 订阅
订阅专栏

HTML5+CSS3设计页面布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        @charset "utf-8";

        /* CSS Document */
        body {
            background-color: #cccccc;
            font-family: Geneva, sans-serif;
            margin: 10px auto;
            max-width: 800px;
            border: solid;
            border-color: #ffffff;
        }

        h2 {
            text-align: center;
        }

        header {
            background-color: #f47d31;
            color: #ffffff;
            text-align: center;
        }

        article {
            background-color: #eeeeee;
        }

        p {
            color: #ff3366;
        }

        nav,
        article,
        aside {
            margin: 10px;
            padding: 10px;
            display: block;
        }

        header#page_header nav {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        header#page_header nav ul li {
            padding: 0;
            margin: 0 20px 0 0;
            display: inline;
        }

        section#posts {
            display: block;
            float: left;
            width: 70%;
            height: auto;
            background-color: #ff6699;
        }

        section#posts aside {
            background-color: #006699;
            display: block;
            float: right;
            width: 35%;
            margin-left: 5%;
            font-size: 20px;
            line-height: 40px;
        }

        section#posts article footer {
            background-color: #003399;
            clear: both;
            height: 50px;
            display: block;
            color: #ffffff;
            text-align: center;
            padding: 15px;
        }

        section#sidebar {
            background-color: #eeeeee;
            display: block;
            float: right;
            width: 25%;
            height: auto;
            background-color: #669999;
            margin-right: 15px;
        }

        footer#page_footer {
            display: block;
            clear: both;
            width: 100%;
            margin-top: 15px;
            display: block;
            color: #ffffff;
            text-align: center;
            background-color: #0066cc;
        }
    </style>
</head>

<body>
    <h2>body</h2>
    <header id="page_header">
        <h1>Header</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </nav>
    </header>
    <section id="posts">
        <h2>Section</h2>
        <article class="post">
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose.</p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
        <article class="post">
            <h2>article</h2>
            <header>
                <h2>Article Header</h2>
            </header>
            <aside>
                <h2>Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose.</p>
            <footer>
                <h2>Article Footer</h2>
            </footer>
        </article>
    </section>

    <section id="sidebar">
        <h2>Section</h2>
        <header>
            <h2>Sidebar Header</h2>
        </header>
        <nav>
            <h3></h3>
            <ul>
                <li><a href="#">April 2019</a></li>
                <li><a href="#">March 2019</a></li>
                <li><a href="#">February 2019</a></li>
                <li><a href="#">January 2019</a></li>
            </ul>
        </nav>
    </section>
    <footer id="page_footer">
        <h2>Footer</h2>
    </footer>

</body>

</html>

 

设计漂亮的导航菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        ul, li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        a {
            color: #9a9a9a;
            text-decoration: none;
        }
        .demo1 li {
            background-color: rgba(238, 238, 238, 1);
            -webkit-transition: all 0.3s ease-in-out 0s;
            -moz-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
            padding-left: 1%;
            height: 50px;
            min-height: 50px;
            width: 0;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
        }
        .demo1 li a {
            width: 50%;
            height: 50px;
            line-height: 50px;
            padding-left: 5px;
            position: absolute;
        }
        .demo1 li:hover {
            background-color: rgba(238, 238, 238, 1);
            -webkit-transition: all 0.3s ease-in-out 0s;
            -moz-transition: all 0.3s ease-in-out 0s;
            -o-transition: all 0.3s ease-in-out 0s;
            -ms-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
            width: 50%;
        }
    </style>
</head>
<body>

    <ul class="demo1">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

<script>
</script>
</body>
</html>

 

设计登录界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        body {
            font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
            margin: 0;
            background-color: #d9dee2;
        }

        #login {
            background-color: #ffffff;
            height: 240px;
            width: 400px;
            margin: -150px 0 0 -230px;
            padding: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 0;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow:
                0 0 2px rgba(0, 0, 0, 0.2),
                0 1px 1px rgba(0, 0, 0, 0.2),
                0 3px 0 #ffffff,
                0 4px 0 rgba(0, 0, 0, 0.2),
                0 6px 0 #ffffff,
                0 7px 0 rgba(0, 0, 0, 0.2);
            -moz-box-shadow:
                0 0 2px rgba(0, 0, 0, 0.2),
                0 1px 1px rgba(0, 0, 0, 0.2),
                0 3px 0 #ffffff,
                0 4px 0 rgba(0, 0, 0, 0.2),
                0 6px 0 #ffffff,
                0 7px 0 rgba(0, 0, 0, 0.2);
            box-shadow:
                0 0 2px rgba(0, 0, 0, 0.2),
                0 1px 1px rgba(0, 0, 0, 0.2),
                0 3px 0 #ffffff,
                0 4px 0 rgba(0, 0, 0, 0.2),
                0 6px 0 #ffffff,
                0 7px 0 rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>

    <form id="login">
        <h1>登录</h1>
        <fieldset id="inputs">
            <input id="username" type="text" placeholder="用户名" autofocus required>
            <input id="password" type="text" placeholder="密码" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" id="submit" value="登录">
            <a href="">忘记密码？</a>
            <a href="">注册新用户</a>
        </fieldset>
    </form>

    <script>
    </script>
</body>

</html>

再继续优化标题、文本框和按钮的样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        body {
            font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
            margin: 0;
            background-color: #d9dee2;
        }

        #login {
            background-color: #ffffff;
            height: 240px;
            width: 400px;
            margin: -150px 0 0 -230px;
            padding: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 0;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            -webkit-box-shadow:
                0 0 2px rgba(0, 0, 0, 0.2),
                0 1px 1px rgba(0, 0, 0, 0.2),
                0 3px 0 #ffffff,
                0 4px 0 rgba(0, 0, 0, 0.2),
                0 6px 0 #ffffff,
                0 7px 0 rgba(0, 0, 0, 0.2);
            -moz-box-shadow:
                0 0 2px rgba(0, 0, 0, 0.2),
                0 1px 1px rgba(0, 0, 0, 0.2),
                0 3px 0 #ffffff,
                0 4px 0 rgba(0, 0, 0, 0.2),
                0 6px 0 #ffffff,
                0 7px 0 rgba(0, 0, 0, 0.2);
            box-shadow:
                0 0 2px rgba(0, 0, 0, 0.2),
                0 1px 1px rgba(0, 0, 0, 0.2),
                0 3px 0 #ffffff,
                0 4px 0 rgba(0, 0, 0, 0.2),
                0 6px 0 #ffffff,
                0 7px 0 rgba(0, 0, 0, 0.2);
        }

        fieldset {
            border: 0;
            padding: 0;
            margin: 0;
        }

        #inputs input {
            padding: 15px 15px 15px 30px;
            margin: 0 0 10px 0;
            width: 353px;
            border: 1px solid #cccccc;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow:
                0 1px 1px #cccccc inset,
                0 1px 0 #fff;
            -webkit-box-shaow:
                0 1px 1px #cccccc inset,
                0 1px 0 #fff;
            box-shadow:
                0 1px 1px #cccccc inset,
                0 1px 0 #fff;
        }

        #inputs input:focus {
            background-color: #ffffff;
            border-color: #e8c291;
            outline: none;
            -moz-box-shadow: 0 0 0 1px #e8c291 inset;
            -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
            box-shadow: 0 0 0 1px #e8c291 inset;
        }

        #actions {
            margin: 25px 0 0 0;
        }

        #submit {
            background-color: #ffb94b;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            -moz-box-shadow:
                0 0 1px rgba(0, 0, 0, 0.3),
                0 1px 0 rgba(255, 255, 255, 0.3) inset;
            -webkit-box-shadow:
                0 0 1px rgba(0, 0, 0, 0.3),
                0 1px 0 rgba(255, 255, 255, 0.3) inset;
            box-shadow:
                0 0 1px rgba(0, 0, 0, 0.3),
                0 1px 0 rgba(255, 255, 255, 0.3) inset;
            border-width: 1px;
            border-style: solid;
            border-color: #d69e31 #e3a037 #d5982d #e3a037;
            float: left;
            height: 35px;
            padding: 0;
            width: 120px;
            cursor: pointer;
            font: bold 15px Arial, Helvetica;
            color: #8f5a0a;
        }
        #actions a {
            color: #3151a2;
            float: right;
            line-height: 35px;
            margin-left: 10px;
        }
    </style>
</head>

<body>

    <form id="login">
        <h1>登录</h1>
        <fieldset id="inputs">
            <input id="username" type="text" placeholder="用户名" autofocus required>
            <input id="password" type="text" placeholder="密码" required>
        </fieldset>
        <fieldset id="actions">
            <input type="submit" id="submit" value="登录">
            <a href="">忘记密码？</a>
            <a href="">注册新用户</a>
        </fieldset>
    </form>

    <script>
    </script>
</body>

</html>

 

即将入土的羸弱老年人
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css练习例子
一虹的博客
08-04 552
Css练习1.1 小米导航栏1.2 新浪导航栏 1.1 小米导航栏 html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/xiaomi.css"> </head> <body> <div id="blue"&g
练习 | css页面练习案例
A123ppleQueen的博客
06-09 716
纸质卡片
css常用demo练习
SundayGoG的博客
05-30 1733
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
CSS基础学习案例
weixin_52031422的博客
07-07 1414
HTML标签 CSS样式引用CSS：标签，头部， 文件 CSS样式 页面布局 三个区域logo,sub-menu，sub-search 4.整合 顶部菜单 + 二级菜单 小结 a标签是行内标签，行内标签的高度，内外边距， 默认无效垂直方向居中a标签默认有下划线，去除 + 鼠标放上后该变标签样式 5. 推荐菜单 5.1整合案例如下 5.2 小结 设置透明度,其值由0-1，值越大越接近本色 6.2 after（伪类） 作用：去除文档流 6.3...
rgba转16js代码
Rs的博客
07-11 1210
<script> function hexify(color) { var values = color .replace(/rgba?\(/, '') .replace(/\)/, '') .replace(/[\s+]/g, '') .split(','); var a = parseFloat(values[3] || 1), ...
css3.0 图形构成实例练习二
09-25
css3.0 的出现给我们带来了很大的影响，本文主要知识点 transform属性/animate的应用，感兴趣的朋友可以参考并学习下实例，希望对你学习图形构成有所帮助
css3.0 图形构成实例练习一
09-25
在本实例中，我们将探讨CSS3如何用于创建图形构成，特别是通过边框半径、绝对定位以及背景颜色等属性来制作一个卡通头像。 首先，我们来看HTML结构。这里有一个`.header`类作为头部容器，包含三个子元素：`.eye_...
HTML+css+JQ 网页实例练习.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
Css样式 －实例练习
02-06
div+css布局。实例制作便于学习或者教学
css 定位应用实例
09-25
本篇将深入探讨CSS定位的应用实例，特别是如何利用`position`属性来实现灵活的页面布局。 首先，理解`position`属性至关重要。`position`属性有四个主要值：`static`、`relative`、`absolute`和`fixed`。默认情况下...
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
css3 操作练习
03-01
css3 操作练习
HTML / CSS 实践练习
MartinYP的博客
07-13 588
HTML / CSS 实践练习记录博客
html+css实战1-仿bootstrap写一个简单css库
02-11
通过仿写一部分bootstrap库的功能，理解如何去实现一个css库，并且学会如何去使用这个库去完成各种页面布局
前端技术——4——CSS练习
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
03-01 1866
仿抽屉新热榜界面： 写一个类似的页面，练习CSS的使用。 整个页面分为两大部分，一是蓝色的页头，然后是页体 头部，即蓝色一行的设置，是页面的头部： <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pad
8年前端带你HTML+CSS入门到实战（附视频+源码）
xingyu_qie的专栏
12-11 1348
本文主要是解决： 想要自学前端开发；但又不太想看博客文章； 觉得自学有点吃力，有点不知道学习步骤的同学
菜鸟学习笔记——前端开发——CSS（5） 实例练习
zhihuiyu123的博客
06-21 3786
由于上次做网页布局的练习摔得有点惨，这次再找一个练一练。例题网址    http://www.runoob.com/w3cnote/htmlcss-make-a-website.html这次练习的是——简单的响应式网页step1：只布局，无响应效果导航栏由于之前练习过，暂时没什么难度；中间部分左右分布（一开始用的float）；下方一个页脚。这一步马马虎虎完成，然而调整窗口大小之后，页面就像一坨某某...
CSS简单练习案例
sokoooo的博客
02-17 3940
CSS简单练习案例 目录 CSS简单练习案例 1. 新闻 2. 小米侧边栏（简易） 3. 五彩导航栏 4. 产品模块 5. 新浪导航栏 6. 排行榜 7. 模块 #END（素材源于pink老师分享） 1. 新闻 1.1 css代码： body { font: 16px/28px 'Microsoft YaHei'; } h1 { font-weight: 400; ..
HTML+CSS小实战案例
热门推荐
Biexiansheng的博客
04-19 1万+
HTML+CSS小实战案例 登录界面的美化，综合最近所学进行练习 网页设计先布局，搭建好大框架，然后进行填充，完成页面布局 1 html> 2 head> 3 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 title>实验title> 5 style type=
全面指南：CSS层叠样式表技术详解与实例
最后，手册提供了丰富的【CSS实例】和测验，通过实战练习和检验学习成果，确保读者能够扎实地掌握所学知识。同时，还包含详细的【CSS参考手册】，包括属性和选择器的参考指南，供开发者随时查阅和查找所需的信息。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值