Web实验二Css样式及页面布局

已于 2023-04-22 23:18:23 修改
阅读量448 收藏 1
点赞数 1
文章标签： css 前端 html
于 2023-04-22 22:57:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74331689/article/details/130312049
版权

实验目的及要求：

  1. 掌握内联样式、嵌入样式、外部样式
  2. 掌握通用选择器、类型选择器、类选择器、Id选择器的使用
  3. 掌握盒子模型
  4. 掌握div+css布局

实验内容：

  1. 应用html标签和css完成如下所示页面效果，图片见附件。

说明：

  • 内容相对于浏览器居中,宽860px
  • 鼠标移动至列表项上，显示背景色#F8F8F8
  • 分割线2px solid #ccc，每项高130px
  • 第一行文字：20px 黑体
  • 标签：字颜色#cccc00 16px
  • 标签项：背景颜色#eee 字体颜色#999 文字大小14px
  • 第三行文字：边框1px solid #eee; 圆角半径25px

其他样式可根据界面效果进行设置

运行截图

代码：

<!DOCTYPE html>
<html lang="en">
 
<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>text1</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            position: relative;
            top:10%;
            
        }
        
        .box {
            width: 860px;
            height: 98px;
            margin: 0 auto;
            border-top: 2px solid #ccc;
            padding-top: 15px;
            padding-bottom: 15px;
        }
        
        .box:hover {
            background: #F8F8F8;
        }
        
        .title {
            font-size: 20px;
            font-family: 黑体;
            padding-bottom: 16px;
 
        }
       
        .bigLable {
            color: #cccc00;
            font-size: 16px;
            background: none;
        }
        
        .box1 {
            background: #eee;
            color: #999;
            font-size: 14px;
        }
        
        .user {
            width: auto;
            text-align: center;
            border: 1px solid #eee;
            border-radius: 25px;
            float: left; 
            margin-top: 12px;
            margin-right: 10px;
            color: #999999;
            font-size: 14px;
        }
 
        p {
            display: inline-block;
            margin-top: 13px;
            color: #999999;
            font-size: 14px;
        }
 
        img {
            width: 140px;
            height: 100px;
            float: left;
            padding-right: 24px;
        }
 
        li {
            list-style-type: none;
            display: inline-block;
            background: #eee;
            color: #999;
            font-size: 14px;
            margin: 0px 2px;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <img src="images/4.jpg" alt="">
        <div class="title">不只有看肤色挑唇色 选对口红衣服更美</div>
        <div>
            <ul>
                <li class="bigLable">标签</li>
                <li>唇膏</li>
                <li>衣服</li>
                <li>粉色</li>
                <li>化妆</li>
                <li>美容美体</li>
            </ul>
        </div>
        <div class="user">悦己self</div>
        <p>2016-10-18</p>
    </div>
    <div class="box">
        <img src="images/5.jpg" alt="">
        <div class="title">学画红唇妆 让你的女王范分分钟秒杀路人</div>
        <div>
            <ul>
                <li class="bigLable">标签</li>
                <li>唇膏</li>
                <li>衣服</li>
                <li>粉色</li>
                <li>化妆</li>
                <li>美容美体</li>
            </ul>
        </div>
        <div class="user">毛戈平形象艺术学校</div>
        <p>2016-10-18</p>
    </div>
    <div class="box">
        <img src="images/6.jpg" alt="">
        <div class="title">无数次给国外博主跪了 把自己的脸画成漫画人物好逼真</div>
        <div>
            <ul>
                <li class="bigLable">标签</li>
                <li>美容美体</li>
            </ul>
        </div>
        <div class="user">八公举</div>
        <p>2016-10-18</p>
    </div>
</body>
 
</html>

2.完成如图所示界面布局和显示效果

运行截图：

代码：

<!DOCTYPE html>
<html lang="en">
<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>text2</title>
</head>
<style>
    body{
        height:90%;width:90%;
        position:fixed;
        top:0;right:0;bottom:0;left:0;
        margin:auto;
    }
    .title{
        padding-top: 10px;
        padding-bottom: 10px;
        border:1px solid;
        border-radius: 5px;
        border-color:darkgrey;
        display:block;
        background-color: darkgrey;

    }
    span{
        text-decoration: underline;
        margin-left: 85px;
        font-size: 20px;
        color: azure;

    }
    span:hover{
        color:red;
    }
    p{
        font-weight: bolder;
        font-size:30px;
    }
    .news{
        margin-right: 200px;
        display:inline-block;
    }
    li{
        overflow: hidden;
        margin-top: 20px;
        margin-bottom: 20px;
        font:15px 黑体;
    }
    .massage{
        margin-right: 100px;
    }
    .date{
        float:right;
    }
    .end{
        position: fixed;
        width: 80%;
        text-align: center;
    }
    .end_span{
        text-decoration: underline;
        font:15px 黑体;
    }
    .body{
        margin-bottom: 300px;
    }
</style>
<body>
    <div class="title">
          <span>首页</span> <span>新闻</span> <span>体育</span> <span>娱乐</span> <span>财经</span><span>科技</span>  <span>手机</span> <span>数码</span> 
        </div>
        <div class="body">
    <div class="news">
        <p>
            娱乐新闻
        </p>
        <ul>
            <li>
                <a class="massage"> 香港已没有黑帮 大家都不想在里面混</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 《碟中谍5》曝外景花絮</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 灾难发生后该不该禁播娱乐节目</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 多部好莱坞大片登录中国</a><a class="date">2018-10-1</a>
            </li>
        </ul>
    </div>
    <div class="news">
        <p>
            军事新闻
        </p>
        <ul>
            <li>
                <a class="massage"> 一</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 二</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 三</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 四</a><a class="date">2018-10-1</a>
            </li>
        </ul>
    </div>

    <div class="news">
        <p>
            数码新闻
        </p>
        <ul>
            <li>
                <a class="massage"> 微软已在秘密测试Android版Edge浏览器</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage">平板电脑五年走到市场拐点</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 苹果邀请函解密Hint有新释义</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> IDF2018因特尔谷歌联手</a><a class="date">2018-10-1</a>
            </li>
        </ul>
    </div>
    <div class="news">
        <p>
            手机新闻
        </p>
        <ul>
            <li>
                <a class="massage"> 超大运行内存手机推荐</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 国产旗舰手机盘点</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 西门子归来 首歌智能机配置强跑分出色</a><a class="date">2018-10-1</a>
            </li>
            <li>
                <a class="massage"> 骗子植入手机木马的10大招术</a><a class="date">2018-10-1</a>
            </li>
        </ul>
    </div>
</div>
    <div class="end">
        <a class="end_span">关于我们</a> <a class="end_span">联系我们</a>
    </div>
</body>
</html>

3.完成如下表单界面设计，图片见附件。

  • 表单宽248px，高220px，背景色#F5EAE8，上下内边距30px  左右内边距40px，边框1px solid #F5EAE8
  • 输入框宽250px，高38px，边框1px solid #CCC，下外边距30px。文本缩进50px，便于显示前方图标。前方图标可考虑背景图片进行设置。
  • 按钮宽255px，高44px，外边距上下25px，左右居中
  • 合作网站区域宽330px 高145px，背景颜色#F5EAE8，上边框1px solid #ddd
  • 内容居中显示

运行截图：

代码：

<!DOCTYPE html>

<html lang="en">

<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>text3</title>

</head>

<style>

    body{

        position: absolute;

        top: 25%;

        left: 40%;

    }

    .div_main{

        width: 248px;

        height:220px;

        padding-top: 30px;

        padding-bottom: 30px;

        background-color: #F5EAE8;

        padding-left: 40px;

        padding-right: 40px;

        border:1px solid #F5EAE8;

    }

    .div_website{

        height:145px;

        width:330px;

        background-color: #F5EAE8;

        border-top: 1px solid #ddd;

        text-align: center;

        padding-top: 10px;

    }

    .account{

        background-color: #F5EAE8;

        width: 250px;

        height: 38px;

        border: 1px solid #ccc;

        margin-bottom: 30px;

        color: #ccc;

        font-size: 15px;

        background-image: url("images/zhanghao.jpg");

        background-repeat: no-repeat;

        text-indent:50px;

        background-position: left;

    }

    .password{

        background-color: #F5EAE8;

        width: 250px;

        height: 38px;

        border: 1px solid #ccc;

        margin-bottom: 30px;

        color: #ccc;

        font-size: 15px;

        background-image: url("images/mima.jpg");

        background-repeat: no-repeat;

        text-indent:50px;

        background-position: left;

    }

    div_e{

        display: inline-block;

    }

    span{

        font-size: 12px;

        color:darkgrey;

    }

    label{

        font-size: 15px;

    }

    button{

        width: 255px;

        height: 44px;

        margin-top: 25px;

        margin-bottom: 25px;

        text-align: center;

        background-image: url("images/but.jpg");

    }

</style>

<body>

    <div class="div_main">

        <input class="account" placeholder="用户名/邮箱地址/手机号" style="position:static;" >

        <input class="password" placeholder="填写密码" style="position:static;" >

        <div class="div_e">

            <input type="checkbox" ><label>记住密码</label>

            <span>欢迎注册</span>

            <span>忘记密码</span>

        </div>

        <div>

            <button></button>

        </div>

    </div>

    <div class="div_website">

        <div class="div_e">

            <a>合作账号登录:</a>

            <img src="images/weixin.png">

            <img src="images/qqlogin.png">

            <img src="images/taobao.png">

        </div>

    </div>

</body>

</html>

泰库拉
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
电商网站前端页面
11-21
HTML前端页面， 包括商品详情、登录、注册、搜索商品页面、购物车页面、个人中心等完整版前端
自学web前端之CSS样式书写
01-08
之前介绍过修饰网页需要用到css样式，但是在哪里写css样式呢？这篇帖子就介绍如何书写。 本篇帖子的目录 1.内部CSS样式代码书写 2.外部CSS样式代码书写 css样式书写 用html写出的网页内容，简单而有单一，不是很好看...
Web实验二 CSS基本样式实验
qq_62377885的博客
06-01 821
定义按钮样式的超链接，背景暗红色，8px圆角，字体色，取消文本下划线，增加内边距，声明合适的显式类型，鼠标悬浮时改变样式。创建一个抽象的标签文本容器样式，默认标签圆角3px，左右内边距5px，字体白色，用于在具体样式背景色中突出显式。创建具有具体的意义的成功标签样式与警告标签样式，声明不同合适的背景颜色。理解并掌握背景、颜色、内外边距、尺寸、圆角等CSS基本属性的使用方法。修改html代码，在合适元素上添加CSS声明的类，使页面的显示样式为。通过创建CSS样式文件，理解CSS样式基本属性作用及意义。
[web程序设计基础R]实验报告（JavaScript事件、JavaScript内置函数与内置对象、HTML基础、CSS+DIV页面布局）
weixin_51538341的博客
12-31 3710
web实验报告
Web实验三 CSS基本网页布局实验
qq_62377885的博客
06-14 1504
在webapp目录下，创建layout.html文件，基于给定HTML代码实现页面布局设计，允许添加class等属性引入css样式。header中声明上导航，添加背景色/悬浮字体颜色等样式，且将logout推至最右侧。通过定义css样式，理解css属性以及页面真整体结构布局的方法及设计思想。为各部分区域设计统一样式；为左侧边栏添加样式，添加背景色/字体色/悬浮等等样式。理解并掌握页面整体结构布局的实现方法及设计思想。理解并掌握上导航、边侧栏的实现方法及设计思想。理解并掌握基于div容器页面布局的方法。
web前端开发实验——2
qq_46476515的博客
10-16 1934
web前端开发实验——2
精通CSS+DIV 网页样式与布局【PDF】
12-19
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript,Ajax,...
HTML+CSS实现登陆页面样式布局,简单的网页布局
最新发布
11-07
HTML+CSS实现登陆页面样式布局 适合大一大二大三的学习知识巩固练习 或者课设作业等
用DIVCSS技术的WEB页面布局实践.doc
11-29
DIV+CSS 技术作为一种新的网页布局方法，正越来越多地被应用于 WEB 页面设计中。下面我们将通过对 DIV+CSS 技术的分析和应用，了解其在 WEB 页面布局设计中的重要性。 一、DIV+CSS 技术概述 DIV+CSS 技术是一种...
Web实验2 CSS基础应用
qq_45738743的博客
03-04 717
掌握在网页中引用CSS的方法； 掌握CSS的基本语法规则； 掌握CSS的常用选择器。 掌握盒子的特性及使用。
电商前端页面
12-23
电商前端页面，可以直接套用，模板.......................
web实验2 CSS基本语法.zip
06-27
实验内容：1.CSS的引入和基本选择器应用;2.利用CSS对网页进行控制；3.利用DIV+CSS实现如图2-3、2-4网页效果的布局和设计，并在多种浏览器上测试。所需图片见附件。4.利用DIV+CSS实现如图2-5网页效果，并在多种浏览器上测试。所需素材见附件。
web作业（简单的CSS样式）
01-03
WEB简单的简单的CSS+DIV没有java部分，适合学生下载作为参考来做作业。
《Web前端设计与开发》实验二：CSS基础实验2
无
09-27 2074
2. 编程实现下面页面布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css1.css"> </head> <body> &lt
web前端笔记二(CSS样式)
weixin_44371927的博客
06-08 243
css：成为样式表，又称为级联样式表或者层叠样式表，css是控制网页的样式和布局。 标签属性： color 颜色 font-size 字号，px代表像素大小 font-family 设置字体 text-align 文本对齐方式，默认left左对齐（不需要手动设置）id 选择器：用标签中的id属性来进行选取,格式：#id值{color：；font-size: ;} id命名规则： 1.不可以数字开头 2.不能包含中划线、下划线之外的符号 3.不建议使用中文 4.命名有意义，有备注功能 5.id命名要唯一，不
《Web前端设计与开发》实验二：CSS基础实验1
无
09-24 2223
一、实验内容 编程实现下面页面布局。 二、实验代码及成品 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css1.css"> </head> <b
网页设计与制作实验二CSS基础应用
Annzz123的博客
06-20 1788
通过本次实验，学会了文本外观样式属：colortext-align和字体样式：font-sizefont-stylefont属性。掌握了css样式的标签选择器、类选择器和id选择器。熟悉了内部样式、行内样式和外部样式表。
02前端入门HTML5 +CSS3+电商网页制作：CSS
maiblog
07-24 4077
02前端入门HTML5 +Css3+电商网页制作0. 来源1. CSS基础认识 0. 来源 路线: https://www.bilibili.com/read/cv10431130 视频： https://www.bilibili.com/video/BV1Kg411T7t9 1. CSS基础认识 cascading style sheets 层叠样式表 在head中的style标签中：选择器 {} ....................................................
Div+CSS布局入门教程
你是我生命中的阳光
11-10 2425
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。页面布局与规划所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图
web社交平台css样式
05-28
关于 Web 社交平台 CSS 样式，这是一个比较宽泛的问题，因为不同的社交平台有着不同的设计风格和样式。 一般来说，Web 社交平台的 CSS 样式会包括以下几个方面： 1. 布局样式：这是社交平台的整体布局样式，包括头部导航、主体内容区、侧边栏等等。一般采用响应式布局，以适应不同屏幕尺寸的设备。 2. 颜色样式：社交平台的颜色样式通常都比较鲜艳、明亮，以吸引用户的眼球。一般会采用一些鲜艳的主题色，同时搭配一些中性色，保持整体的平衡。 3. 字体样式：社交平台的字体样式一般比较简洁、清晰，以方便用户的阅读。大多数社交平台会采用一种或几种标准字体，比如 Helvetica、Arial、Roboto 等等。 4. 图标样式：社交平台的图标样式通常都比较简单、易识别，以方便用户进行操作。常见的图标包括头像、点赞、评论等等。 5. 动效样式：社交平台的动效样式通常比较丰富、生动，以增加用户的体验感。常见的动效包括鼠标悬停、点击效果、下拉刷新等等。 当然，以上只是社交平台 CSS 样式的一些常见方面，具体的样式还要根据不同的社交平台进行设计和调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值