开卷资料4

已于 2023-04-23 15:50:57 修改
阅读量39 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HITSZ DIP 研开卷复习资料
05-04
HITSZ DIP 研开卷复习资料
交大电子商务开卷资料.pdf
05-17
交大电子商务开卷资料.pdf
开卷有益_csdn
09-02
开卷有益
热学半开卷考试携带资料2.jpg
03-02
热学半开卷考试携带资料2.jpg
马哲开卷考试资料
06-13
大学马哲考试题库，以简答题和填空题为主。是开卷考试的利器
前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局
weixin_42830015的博客
05-18 980
前端三大件速成 03 CSS（2）常用属性、内外边距及定位布局
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 139
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 206
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
5.小程序页面布局 - 记账页面(名目布局、绘制键盘、引用picker时间选择组件)
KelvinLiu
05-18 811
记账小程序的记账页面，flex布局，自定义键盘，选择图片加样式提交
CSS-元素堆叠顺序
Kevin7_35Durant的博客
05-18 150
元素的堆叠效果，是根据书写的顺序来的，后面的在上面绿色在最上面，随后是红色，最后是蓝色，跟书写的顺序一样我们可以改变这个顺序。
探索 CSS、Sass 和 SCSS：区别与应用
一个普通人
05-21 515
CSS 是一种用来描述 HTML 或 XML 文档外观和格式的样式表语言。它通过定义样式规则，来控制网页元素的呈现方式。Sass 是一个 CSS 预处理器，扩展了 CSS，添加了变量、嵌套规则、混入、继承等功能，增强了样式表的功能性和可维护性。SCSS 是 Sass 的一种语法，是 CSS 的超集，这意味着所有有效的 CSS 代码在 SCSS 中同样有效。它结合了 CSS 的简单性和 Sass 的强大功能。CSS 是基础的样式表语言，语法简单但功能有限，适用于简单的样式需求。
CSS变量的应用
qq_26854355的博客
05-20 389
CSS变量的简单应用。
CSS中的Flex布局
zheshiyangyang的博客
05-21 385
Flexflex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)flex-flow：子元素的排列方式和换行方式的简写justify-content：子元素的水平对齐方式align-items：子元素的垂直对齐方式align-content：设置多个元素组成的整块的对齐方式order：按照数字大小设置各个元素之间的排列方式flex-grow：按照权重分配剩余空间进行等比例放大。
vue-cli2项目中使用scss
Hi_MrXiao的博客
05-21 226
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
3D效果轮播图
weixin_46041602的博客
05-21 341
/margin;padding;box-sizing;body;;width;height;margin;溢出隐藏和3D变化会导致子元素溢出父元素盒子的问题相冲突，会导致不同图片3D效果切换无法实现*/position;;transition;imgdisplay;width;height;position;top;left;20%
error in ./src/assets/css/element-variables.scss
qq_46199553的博客
05-15 309
这通常发生在使用 Webpack 和相关的 loader（如 sass-loader 或者 css-loader）来构建项目时，文件中的内容不符合预期或者缺少必要的 loader 配置。这个错误表明你的项目中使用的sass-loader需要node-sass的版本至少为4，但是当前项目依赖中的node-sass版本低于4。如果你使用的是 Vue.js 或其他前端框架，确保 element-variables.scss 文件的引用路径是正确的，并且遵循了该框架的样式导入规则。打开终端（命令行）。
前端 CSS 经典：SVG 描边动画
weixin_64684095的博客
05-18 176
实现原理：将 stroke-dasharray 和 stroke-dashoffset 设置为。stroke-dasharray：将描边线变成虚线、其中实线和虚线部分的长度就是它的值。使用 css 中的 stroke 属性，用来描述描边的样式，其中重要的属性。stroke-dashoffset：描边线的偏移量。方法可以获取 path 的长度。设置动画，将描边线的偏移量。理解了这两个属性的原理，才能理解描边动画实现的原理。svg 中 path 的长度，这样初始状态就是。，其中变化的过程就是描边动画。
CSS学习笔记：动画——使用animation添加动画效果
lbcbjtlhmjq的博客
05-21 139
例如transition: all 0.5s;-> 拥有该属性的标签，在样式改变时，将在设定的时间内逐渐过渡到另一个样式。
CSS 中 background 和 background-color 的区别
m0_74284133的博客
05-18 337
2、background设置背景颜色会默认有{background:no-repeat}；而background-color的默认属性是{background:no-repeat}，即 {background-color:#ccc;1、background可以设置背景颜色color，添加背景图片url, 调整平铺状态repeat ,调整图片的位置left、right、top、bottom等；
python开卷考试材料
01-07
4. 在线教程和视频课程：有很多在线教程和视频课程可以帮助您学习Python。一些知名的学习平台，如Coursera、Udemy和Codecademy等，提供了丰富的Python课程资源。 5. Python编程练习题：通过解决编程练习题，您可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值