开卷资料4

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

 1．应用html和css完成如图所示界面效果。内容相对于浏览器居中，图标见附件disc.jpg。

说明：

  • 内容相对于浏览器居中，图标见附件disc.jpg
  • 盒子边框1px solid #ccc，内边距20px
  • 文本字体颜色#122e67，文本高度30px

运行截图

代码：

<!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>Document</title>

</head>

<style >

    .div1{margin: 0  auto; width:500px;  border:5px solid#ccc;padding: 20px;}

    .div2{margin: 0  auto; width:450px;  border:1px solid#ccc;padding: 20px;}

    li{

        text-align: left;

        color:#122e67;

        line-height: 30px;

        text-decoration: solid;

        list-style-image: url(images/disc.jpg);

        border-bottom: 1px dotted #ccc;

    }

</style>

<body>

    <div class="div1">

        <div class="div2" >

            <ul>

                <li>222222222222222222222222222222222222</li>

                <li>222222222222222222222222222222222222</li>

                <li>222222222222222222222222222222222222</li>

                <li>222222222222222222222222222222222222</li>

                <li>222222222222222222222222222222222222</li>

                <li>222222222222222222222222222222222222</li>

               

            </ul>

        </div>

    </div>

</body>

</html>

2.完成如下图所示界面设计效果

说明：

  • 可考虑基于列表进行设计，居中显示
  • 将列表转换为inline-block实现横向显示，每项高200px 宽216px，上、左内间距20px
  • 上部字体大小18px，颜色#000，下部字体大小14px，颜色#64C333
  • 所需图片见附件，图片宽度154px，左间距60px

运行截图：

代码：

<!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>Document</title>

</head>

<style>

    .box{

        width: 1200px;

        margin: auto;

        background-color: #ccc;

    }

    .box ul{

       

        margin: auto;

    }

    img{

        width: 154px;

        padding-left: 60px;

    }

    li{

        display: inline-block;

        overflow: hidden;

        background-color: white;

        border-top:4px solid #ccc;

        height: 200px;

        width: 216px;

        padding-left: 20px;

        padding-top: 20px;

    }

    .span1{

        display: block;

        font-size: 18px;

        color: #000;

    }

    .span2{

        display: block;

        font-size: 14px;

        color: #64C333;

    }

</style>

<body>

    <div class="box">

    <ul>

        <li>

            <span class="span1">

                抱抱果新首发

            </span>

            <span class="span2">

                抱一下就幸福

            </span>

            <img src="images/1.jpg">

        </li>

        <li>

            <span class="span1">

                天猫冰箱节

            </span>

            <span class="span2">

                智由随风

            </span>

            <img src="images/2.jpg">

        </li>

        <li>

            <span class="span1">

                西门子全球精选

            </span>

            <span class="span2">

                旗舰精品享你所想

            </span>

            <img src="images/3.jpg">

        </li>

        <li>

            <span class="span1">

                进口葡萄酒专场

            </span>

            <span class="span2">

                原瓶进口品质保证

            </span>

            <img src="images/4.jpg">

        </li>

        <li>

            <span class="span1">

                手机专场

            </span>

            <span class="span2">

                原装正品

            </span>

            <img src="images/5.jpg">

        </li>

    </ul>

</div>

</body>

</html>

三、完成下图所示的静态网页制作

说明：

  • 可考虑基于列表进行设计，居中显示
  • 列表项高320px 宽250px，外间距10px，内间距10px，边框线1px solid #ccc
  • 每项中第一行文字14px，颜色#666，文本行高度32px。其他行文字12px，颜色#66667F，文本行高度25px
  • “原创作品”加粗，颜色#FF5584
  • 所需图片见附件，图片宽度250px，高度188px

运行截图：

代码：

<!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>Document</title>

</head>

<style>

    div{

        margin-left: 50%;

        margin: 0 auto;

    }

    li{

        height: 320px;

        width: 250px;

        margin: 10px;

        padding: 10px;

        border: 1px solid #ccc;

        overflow: hidden;

    }

 

    .h1{

        line-height: 20px;

        font-size: 14px;

        color: #666;

        font-weight: bold;

       

    }

    .h2{

        line-height: 15px;

        font-size: 12px;

        color: #66667F;  

       

    }

    strong{

        color: #FF5584;

    }

</style>

<body>

    <div>

        <ul>

            <li>

                <img src="images/pic1.jpg" width=250px height=188px>

                <span class="h1">动画便利店X果壳网《西门子洗碗机...</span>

                <p class="h2"><strong> 原创作品</strong>-影视-Motion Graphic</p>

                <p class="h2">

                    2小时前上传

                </p>

                <p class="h2">

                    <strong>1284  </strong> 人气/<strong>11  </strong>  评论/<strong>47   </strong>推荐

                </p>

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

            </li>

            <li>

                <img src="images/pic2.gif" width=250px height=188px>

                <span class="h1">动画便利店X视知《到底工资怎么发...</span>

                <p class="h2"><strong> 原创作品</strong>-影视-Motion Graphic</p>

                <p class="h2">

                    3小时前上传

                </p>

                <p class="h2">

                    <strong>1569  </strong> 人气/<strong>50  </strong>  评论/<strong>125   </strong>推荐

                </p>

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

            </li>

        </ul>

    </div>

</body>

</html>

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

</head>

<style type="text/css">

    ul{

        margin:auto;

    }

    div{

        display: flex;

    }

    img{

        height: 100px;

        margin-top: 15px;

        margin-left: 10px;

    }

    li{

        overflow: hidden;

        border-top: 2px solid #ccc;

        width: 860px;

        height: 130px;

    }

    li:hover{

        background-color: #f8f8f8;

    }

    .p1{

        display: block;

        margin-left: 20px;

    }

    .p2{

        font:20px 黑体;

        margin-left: 20px;

        margin-top: 15px;

    }

    .p3{

        border: 1px solid #eee;

        border-radius: 25px;

        font-size: 14px;

        margin-left: 20px;

    }

    .tag{

        font-size: 16px;

        color: #cccc00;

    }

    .tag2{

        display:inline-block;

        background-color: #eee;

        font-size: 14px;

        color: #999;

        margin:3px;

        text-align: center;

    }

    span{

        color: #999;

        font-size: 14px;

    }

</style>

<body>

    <ul >

        <li>

            <div>

                <img src="images/4.jpg">

                <div class="p1">

                    <p class="p2">

                    不只有看肤色挑唇色 选对口红衣服更美

                    </p>

                    <p class="p1">

                        <span class="tag">标签</span>

                        <span class="tag2">唇膏</span>

                        <span class="tag2">衣服</span>

                        <span class="tag2">粉色</span>

                        <span class="tag2">化妆</span>

                        <span class="tag2">美容美体</span>

                    </p>

                    <span class="p3">悦己self</span>

                    <span>2016-10-18</span>

                </div>

            </div>

        </li>

        <li>

            <div>

                <img src="images/5.jpg">

                <div class="p1">

                    <p class="p2">

                    学画红唇妆 让你的女王范分分钟秒杀录人

                    </p>

                    <p class="p1">

                        <span class="tag">标签</span>

                        <span class="tag2">唇膏</span>

                        <span class="tag2">衣服</span>

                        <span class="tag2">粉色</span>

                        <span class="tag2">化妆</span>

                        <span class="tag2">美容美体</span>

                    </p>

                    <span class="p3">毛戈平形象艺术学校</span>

                    <span>2016-10-18</span>

                </div>

            </div>

        </li>

        <li>

            <div>

                <img src="images/6.jpg">

                <div class="p1">

                    <p class="p2">

                    不只有看肤色挑唇色，选对口红衣服更美

                    </p>

                    <p class="p1">

                        <span class="tag">标签</span>

                        <span class="tag2">美容美体</span>

                    </p>

                    <span class="p3">八公举</span>

                    <span>2016-10-18</span>

                </div>

            </div>

        </li>

    </ul>

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

</head>

<style>

    body{

        width: 90%;

        margin:auto;

        position:fixed;

    }

    .title{

       

        border: 8px solid;

        border-radius: 3px;

        margin-top: 10px;

        border-color: grey;

        background-color: grey;

    }

    span{

        text-decoration: underline;

        margin-left: 40px;

        font-size: 16px;

        color: white;

    }

    span:hover{

        color: red;

    }

    p{

        margin-left: 15px;

        font:20px 黑体;

    }

    li{

        overflow: hidden;

        margin-top: 20px;

        margin-bottom: 20px;

        font:12px 黑体;

    }

    .bankuai1{

        width: 320px;

        height: 200px;

        float: left;

        display:inline-block;

        margin-right: 100px;

        margin-top: 30px;

    }

    .news{

        margin-right: 10px;

    }

    .date{

        float:right;

    }

    .end{

        text-decoration: underline;

        font: 16px 黑体;

    }

    .mokuai2{

        margin-top: 500px;

        position: fixed;

        width: 80%;

        text-align: center;

    }

</style>

<body>

    <div class="title">

        <span>首页</span>

        <span>新闻</span>

        <span>体育</span>

        <span>娱乐</span>

        <span>财经</span>

        <span>科技</span>

        <span>手机</span>

        <span>数码</span>

    </div>

    <div class="bankuai1">

        <p>娱乐新闻</p>

        <ul>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

        </ul>

    </div>

    <div class="bankuai1">

        <p>军事新闻</p>

        <ul>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

        </ul>

    </div>

    <div class="bankuai1">

        <p>数码新闻</p>

        <ul>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">IDF2018英特尔谷歌联手</a><a class="date">2018-10-1</a>

            </li>

        </ul>

    </div>

    <div class="bankuai1">

        <p>手机新闻</p>

        <ul>

            <li>

                <a class="news">超大运行内存手机推荐</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">国产旗舰手机盘点</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">西门子归来 首款智能机配置强跑分出色</a><a class="date">2018-10-1</a>

            </li>

            <li>

                <a class="news">11111111111111111111</a><a class="date">2018-10-1</a>

            </li>

        </ul>

    </div>

    <div class="mokuai2">

        <a class="end">关于我们</a><a> </a><a class="end">联系我们</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>Document</title>

</head>

<style>

    body{

        margin:0 auto;

        width:300px;

        height:200px;

        margin-top: 100px;

    }

    .table{

        width: 248px;

        height:220px;

        padding-top: 30px;

        padding-bottom: 30px;

        background-color: #F5EAE8;

        padding-left: 40px;

        padding-right: 40px;

        border:1px solid #F5EAE8;

    }

    .input1{

        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;

    }

    .input2{

        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;

    }

    .website{

        height:145px;

        width:330px;

        background-color: #F5EAE8;

        border-top: 1px solid #ddd;

        text-align: center;

        padding-top: 10px;

    }

    .div1{

        display: inline-block;

    }

    span{

        font-size: 12px;

        color:darkgrey;

    }

    label{

        font-size: 15px;

    }

    .img1{

        width: 255px;

        height: 44px;

        margin-top: 25px;

        margin-bottom: 25px;

        text-align: center;

    }

</style>

<body>

    <div class="table">

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

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

        <div class="div_e">

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

            <span>欢迎注册</span>

            <span>忘记密码</span>

        </div>

        <div>

            <img class="img1" src="images/but.jpg">

        </div>

    </div>

    <div class="website">

        <div class="div1">

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

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

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

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

        </div>

    </div>

</body>

</html>

lllAJING
关注
计组期末开卷资料
已归档
07-01 3581
Catalogue 网盘链接： 提取码： 1.数据的编码表示（原、反、补、移码的编码和转换方法） 1.1知识储备 三种机器数的小结： 最高位为符号位，书写上用“，”/不写（整数）或“.”（小数）将数值部分和符号位隔开。 对于正数，原码=补码=反码 对于负数，符号位为1，其数值部分 原码除符号位外每位取反末位加1—>补码 原码除符号位外每位取反—>反码 1.2典型例题 1、定点数x=-100，其8位原码是（1）、反码是（2）、补码是（3）、移码是（4） （例如10110110） 参考解答
HITSZ DIP 研开卷复习资料
05-04
HITSZ DIP 研开卷复习资料 本资源是关于数字图像处理（DIP）的研开卷复习资料，涵盖了数字图像处理的基本概念、原理和方法。下面将对该资源进行详细的知识点梳理。 一、数字图像处理的基本概念 数字图像处理是指...
matlab开卷考试,开卷考试
weixin_32374723的博客
03-21 757
刚刚看完这学期的试卷。自从06年上半年改为开卷考试以来，随着越来越多的学生有了新课本(即指定教材)，我对卷面情况的感觉是，一次不如一次。以前的考试还能感觉到很多学生发自内心对问题的理解，而现在这种感觉已经很少了。努力地辨别出卷子上龙飞凤舞的字，却发现那段文字仍是刚刚看过那段，心中压抑不住的厌烦，甚至愤怒。大家说着一样的空话，海阔天空地从课本上狂抄，根本不在乎与题目问的没有丝毫关系。也曾经有同学说起...
《软件工程》开卷考试资料(华科软院)
哆啦一泓的博客
06-21 1209
听说明天下午考试了，嗯... 1.另一个版本的PPT 下载链接：https://wwa.lanzous.com/ieLxKdx1wuj 2.网上搜集来资料：自考真题、别的学校的期末真题 下载链接：https://wwa.lanzous.com/iJQSfdx1qeh 3.网上找来的知识点 下载链接：https://wwa.lanzous.com/iqadhdx1vxg 4.游泳馆真题 下载链接：https://wwa.lanzous.com/izdw9dx...
开卷资料1
lllAJING的博客
04-23 76
请选择...
html5开卷考试,美国AP开卷考试
weixin_30322901的博客
06-05 148
AP 考试是美国大学里的一种考试，而在今年，这个考试改为了开卷形式，那么它的成绩对于学生会有哪一部分的影响？来阅读出国留学网收集来的内容吧。一、AP考试的解读在这一次的考试中虽然是开卷，学生们可以用任何种类的设备来考试，包括PC/Mac和平板这一些。作答的时候可以打字，或者写下来然后拍照输入。像是微积分这一种打字不是很方便录入的科目，就能够先写下来然后拍照上传，CB自然会用专业的软件来对这些答案进...
自然辩证法概论国科大开卷考试
a20010130的博客
11-14 1114
国科大雁栖湖校区研一课程自然辩证法概论期末开卷考试
html5开卷考试,历史开卷考试如何“抄”书本，给你5个答题小技巧！
weixin_32171133的博客
06-05 339
答题要规范，切忌乱翻书！现在中考历史科命题的原则主要是探索怎样使试题更加体现开卷考试的特点，因此试题一是注重考查学生对知识的理解与运用能力。开卷考试，课本在其中的重要作用是可想而知的，但有的同学在答题时存在一些误区，主要有以下几个问题：1、开卷不用记忆有的同学在平时的学习和复习中把老师上课所讲的例题，或自己在教辅书中做过的题目和答案不厌其烦地、密密麻麻地抄在课本的空白处，甚至把课本的原文字都遮住了...
计算机控制系统开卷试卷,《计算机控制技术》试卷
weixin_30070961的博客
07-08 280
样卷系 班级 学号(9位) 姓名 ———————————阅————卷————密————封————装————订————线——————————常熟理工学院 学年第 学期《计算机控制技术》考试试卷(样卷)使用班级： 试题总分：80 分(实际操作2...
哈工大 计算机系统 一纸开卷CSAPP
东风的博客
06-06 986
哈工大计算机系统CSAPP 一纸开卷
国科大 系统与计算神经科学 开卷 A4 资料 仅供参考
12-20
本篇资料主要涵盖了该领域的一些基础概念和重要发现。 首先，资料提到了神经科学历史上的关键事件，如1906年Gamillo Golgi和Santigao Ramony Cajal发明的“高尔基法”，这使得科学家们首次能够在显微镜下观察单个...
交大电子商务开卷资料.pdf
05-17
交大电子商务开卷资料.pdf
热学半开卷考试携带资料2.jpg
03-02
热学半开卷考试携带资料2.jpg
大学生心理健康教育期末考试资料(开卷必备)
06-07
大学生心理健康教育期末考试资料 本资源摘要信息涵盖了大学生心理健康教育的多个方面，包括心理健康的定义、影响个体心理发展的因素、大学生常见的心理问题、心理健康标准、心理疾病干预措施、培养大学生的心理健康...
名词（术语）了解--CSSOM (CSS Object Model)
weixin_40539956的博客
10-29 589
/ 1. 定义全局 CSS 变量// 2. 读取 CSS 变量// 3. 动态主题实现light: {},dark: {});
【前端基础】CSS进阶
qq_41413652的博客
11-01 785
目标：掌握复合选择器作用和写法；使用background属性添加背景效果。
第七章利用CSS和多媒体美化页面
2402_83227353的博客
10-29 868
用这个属性可以同时设置列表型属性（list一style-type），列表项图片属性（list-style-image）和列表项位置属性（list-style-position）。border-spacing 属性作用等同于标签属性 cellspacing，即当表格边框独立时（border-collapse 属性等于separate），相邻单元格边框之间的横向和纵向的间距。caption-side 属性设置或检索表格标题在表格的哪一边，此属性必须和表格的caption标签同时使用。
第八章 利用CSS制作导航菜单课后习题
最新发布
2302_80786141的博客
11-01 577
【代码】第八章 利用CSS制作导航菜单课后习题。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 2076
【代码】炫酷的登录框!(附源码)
2010下半年全国计算机二级C语言全新开卷资料
4. 函数：函数的定义、调用、参数传递，以及函数的嵌套和递归。 5. 数组：一维数组、二维数组的声明、初始化和操作，数组作为函数参数的使用。 6. 指针：理解指针的概念，掌握指针的声明、初始化，以及通过指针...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值