web实验2

最新推荐文章于 2024-09-14 17:14:08 发布
最新推荐文章于 2024-09-14 17:14:08 发布
阅读量49 收藏
点赞数
文章标签： 前端 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengj73/article/details/130309189
版权
  • 内容相对于浏览器居中,宽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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        ul li a{
            margin: 0 auto;
            width: 860px;
            height: 130px;
            border-top: 2px solid #ccc;
            display:block;
            text-decoration: none;
            margin-top: 10px;
        }
        ul li #a1{
            background-image: url(img2/4.jpg);
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 20%;
        }
        ul li #a2{
            background-image: url(img2/5.jpg);
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 20%;
        }
        ul li #a3{
            background-image: url(img2/6.jpg);
            background-position: left center;
            background-repeat: no-repeat;
            background-size: 20%;
        }
        ul li .text{
            margin-left: 200px;
            margin-top: 20px;
        }
        ul li .text div{
            margin-top: 15px;
        }
        ul li .text h5{
            font-size: 20px;
            font-family: "黑体";
            color: black;
        }
        ul li .text .label{
            color: #cccc00;
            font-size: 16px;
            /* margin: 10px; */
        }
        ul li .text .label2{
            background-color: #eee;
            color: #999;
            font-size: 14px;
            /* margin: 10px; */
        }
        ul li .text .label1{
            border:1px solid #eee;
            border-radius: 25px;
            margin-top: 10px;
            color: #999;
            font-size: 15px;
        }
        ul li .text .time{
            color: #999;
            font-size: 15px;
        }
        ul li a:hover{
            background-color: #F8F8F8;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="" id ="a1">
                <div class = "text">
                    <div>
                        <h5>不只看肤色挑唇膏 选对衣服口红衣服更美</h5>
                    </div>

                    <div>   
                        <span class = "label">标签</span>
                        <span class="label2">唇膏</span>
                        <span class="label2">衣服</span>
                        <span class="label2">粉色</span>
                        <span class="label2">化妆</span>
                        <span class="label2">美容美体</span>
                    </div>

                    <div>   
                        <span class="label1">悦己self</span>
                        <span class="time">2016-10-18</span>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="" id ="a2">
                <div class = "text">
                    <div>
                        <h5>学画红唇妆 让你的女王范分分钟秒杀路人</h5>
                    </div>

                    <div>   
                        <span class = "label">标签</span>
                        <span class="label2">唇膏</span>
                        <span class="label2">衣服</span>
                        <span class="label2">粉色</span>
                        <span class="label2">化妆</span>
                        <span class="label2">美容美体</span>
                    </div>

                    <div>   
                        <span class="label1">毛戈平形象艺术学校</span>
                        <span class="time">2016-10-18</span>
                    </div>
                </div>
            </a>
        
        </li>
        
        <li>
            <a href="" id ="a3">
                <div class = "text">
                    <div>
                        <h5>无数次给国外博主跪了 把自己的脸画成漫画人物好逼真</h5>
                    </div>

                    <div>   
                        <span class = "label">标签</span>
                        <span class="label2">美容美体</span>
                    </div>

                    <div>   
                        <span class="label1">八公举</span>
                        <span class="time">2016-10-18</span>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</body>
</html>

    tab栏切换显示不同

    <!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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* body{
            /* position: fixed; */
        
        .title{
            width: 1100px;
            height: 40px;
            background-color: #999;
        }
        .title a{
            /* height: 40px; */
            width: 70px;    
            color: white;
            margin-left: 40px;
            line-height: 40px;
            font-size: 17px;
            display: inline-block;
        }
        .title a:hover{
            color: red;
        }
        div{
            width: 500px;
            height: 300px;
            /* float: left; */
        }
        .news p{
            font-weight: 700;
            font-size: 25px;
            margin-bottom: 20px;
        }
        .news{
            margin-right: 60px;
            margin-left: 20px;
            margin-top: 50px;
            display: inline-block;
            /* float: left; */
        }
        .news ul li{
            list-style: none;
            padding: 10px 0;
        }
        .news ul li .time{
            float: right;
        }
        .news ul li .context{
            margin-left: 20px;
        }
        .foot{
            margin: 0 500px;
        }
        .foot a{
            color: black;
            font-weight: 500;
        }
</style>
</head>
<body>
    <div class="title">
        <a href="">首页</a>
        <a href="">新闻</a>
        <a href="">体育</a>
        <a href="">娱乐</a>
        <a href="">财经</a>
        <a href="">科技</a>
        <a href="">手机</a>
        <a href="">数码</a>
    </div>

    <div class="news">
        <p>娱乐新闻</p>
        <ul>
            <li>
                <a class="context">家都不想在里面混</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">谍中谍</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">灾难发</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">多部好莱坞大片登陆中国</a>
                <a class="time">2018-10-1</a>
            </li>
        </ul>
    </div>
    

    <div class="news">
        <p>军事新闻</p>
        <ul>
            <li>
                <a class="context">3日9:00开始</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">告诫</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">网站开设关</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">尽出</a>
                <a class="time">2018-10-1</a>
            </li>
        </ul>
    </div>

    <div class="news">
        <p>数码新闻</p>
        <ul>
            <li>
                <a class="context">微软</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">平板电脑五年走到市场拐点</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">苹果邀请函解密Hint有新释义</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">IDF2018英特尔谷歌联手</a>
                <a class="time">2018-10-1</a>
            </li>
        </ul>    
    </div>

    <div class="news">
        <p>手机新闻</p>
        <ul>
            <li>
                <a class="context">超大运行内存手机推荐</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">国产旗舰手机盘点</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">西门子归来 首款智能机配置强跑分出色</a>
                <a class="time">2018-10-1</a>
            </li>
            <li>
                <a class="context">骗子植入手机木马的10大招数</a>
                <a class="time">2018-10-1</a>
            </li>
        </ul>
    </div>
    

    <div class="foot">
        <a href="">关于我们</a>
        <a href="">联系我们</a>
    </div>
</body>
</html>

  • 表单宽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>
    <style>
        body{
            background-color: #F5EAE8;
        }
        .main{
            width: 260px;
            height: 220px;
            padding: 20px 30px;
            border: 1px solid #999;
        }
        .ad{
            width: 300px;
            height: 150px;
            padding: 0 20px 0 20px;
            text-align: center;
            /* border: 1px solid #999; */
            margin-top: 20px;
        }
        .main .input1{
            width: 250px;
            height: 30px;
            border: 1px solid #ccc;
            font-size: 13px;
            background-image: url(img2/zhanghao.jpg);
            background-repeat: no-repeat;
            background-position: left;
            text-indent: 50px;
        }
        .main .input2{
            width: 250px;
            height: 30px;
            border: 1px solid #ccc;
            font-size: 13px;
            background-image: url(img2/mima.jpg);
            background-repeat: no-repeat;
            background-position: left;
            text-indent: 50px;
            margin-top: 25px;
        }
        .main .check{
            margin-top: 30px;
        }
        .main .check label{
            font-size: 10px;
        }
        .main .check span{
            font-size: 10px;
            color: #999;
            margin-left: 10px;
        }
        .main .btn{
            width: 255px;
            height: 44px;
            text-align: center;
            background-image: url(img2/but.jpg);
            background-repeat: no-repeat;
            margin-top: 20px;
        }
        .ad a{
            text-decoration: none;
            color: black;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="main">
        <input type="text" class="input1" placeholder="用户名/邮箱地址/手机号" style="position: static;">
        <input type="password" class="input2" placeholder="填写密码" style="position: static;">
        <div class="check">
            <input type="checkbox">
            <label >记住密码</label>
            <span>欢迎注册</span><span>忘记密码</span>
        </div>
        <div class="btn">
            <!-- <button></button> -->
        </div>
    </div>

    <div class="ad">
        <a href="">合作账号登录：</a>
        <img src="img2/weixin.png" alt="">
        <img src="img2/qqlogin.png" alt="">
        <img src="img2/taobao.png" alt="">
    </div>
    
</body>
</html>

73560
关注
web实验2 制作简单网页（HTML+CSS）
人生当苦无妨
08-20 2万+
web实验2 制作简单网页（HTML+CSS） 一、实验目的 1．掌握文本样式的设置。 2．掌握图像样式的设置。 3．掌握各种媒体的插入方法。 二、实验内容 采用DIV+CSS，制作“在线电影”页面。 三、操作提示 1．新建网站的文件夹，网站图像素材保存在images文件夹中，媒体文件放在flash文件中。 2．新建index.html页面，要求：  页面字体大小为14px，文本颜色为#000；  页面背景颜色为#edb8d2；  上下左右距均为0。 3．利用div布局，宽度为900px，居中对齐。
java web实验_javaweb实验报告
weixin_32188111的博客
02-12 3724
javaweb实验报告 甘肃政法学院本科生实验报告(一)姓名:学院:计算机科学学院专业: 计算机科学与技术班级实验课程名称:实验日期:2012 年 04 月 9 日指导教师及职称实验成绩:开课时间：2012 学年 二 学期甘肃政法学院实验管理中心印制实验题目 Java Web 项目开发环境搭建于简单开发 Jsp 指令标记与动作标记 Jsp 内置对象 小组合作 否姓名 班级 学 号一、实验目的1、 ...
Web实验二
weixin_47786301的博客
04-25 1281
web实验二 实验内容： 1． 应用html标签和css完成如下所示页面效果，图片见附件。 说明：  内容相对于浏览器居中,宽860px  鼠标移动至列表项上，显示背景色#F8F8F8  分割线2px solid #ccc，每项高130px  第一行文字：20px 黑体  标签：字颜色#cccc00 16px  标签项：背景颜色#eee 字体颜色#999 文字大小14px  第三行文字：边框1px solid #eee; 圆角半径25px 其他样式可根据界面效果进行设置 运行截图 代码： &
java web实验报告_JavaWeb实验报告
weixin_28712661的博客
02-21 5311
实验一开发环境配置及Servlet程序设计一、实验目的1、了解并熟悉编程环境、编程工具，包括Tomcat、MyEclipse和JDK；2、学会配置环境变量；3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法；4、掌握在Tomcat中手工创建可执行程序的方法；二、实验内容及要求本次实验内容分为两部分：1、验证部分1)通过手动的方式在Tomcat中建立工程my，在该工程...
Web实验三
weixin_51733609的博客
11-19 988
1.实验题目： 设计Studeon页面 2.实验代码 (1)golal.css文件 （2）index.css文件 （3）index.html文件 3.实验结果： 4.实验代码压缩包： 实验三代码压缩包
网络安全实验——web安全
weixin_58628068的博客
05-18 3723
XSS（Cross-Site Scripting）是一种常见的Web应用程序漏洞，攻击者可以通过注入恶意脚本来获取用户的敏感信息或者控制用户的账户。攻击者可以通过在输入框、URL参数等地方注入恶意脚本来实现XSS攻击。为了防止XSS攻击，应该对用户提交的数据进行过滤和转义，避免将用户输入的内容作为HTML或JavaScript代码直接输出到页面上。在盗取rookie（一个虚拟人物）的实验中，攻击者通过在评论中注入恶意脚本，来实现对rookie账户的控制。
web实验超详细步骤
qq_56628318的博客
05-31 2239
web网页详细制作
Java与web实验报告,Java Web实验报告一
weixin_33226816的博客
03-10 1166
实验一 开发环境配置及Servlet程序设计一、实验目的1、了解并熟悉编程环境、编程工具，包括Tomcat、MyEclipse和JDK；2、学会配置环境变量；3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法； 4、掌握在Tomcat中手工创建可执行程序的方法；5、加强对servlet的生命周期的理解；掌握servlet程序的实现方法。 二、实验内容及要求本次实验...
java web实验报告,789Java Web实验报告
weixin_42101056的博客
03-13 2189
处罚规定规范vhghgyugg一天实验报告实验一1、安装JDK、Tomcat，进行测试。2、修改Tomcat端口为8976，重新进行测试。3、安装MyEclipse，绑定Tomcat，建立站点，并测试。4、在站点内编写一个简单的网页，在服务器中运行，在本机上访问，然后用另一台机器访问。时间：9月2日实验二1、用服务器端脚本在屏幕上打印100个“欢迎”，然后用客户端脚本在屏幕上打印100个“欢迎”，...
Web实验六 JavaScript实验
Yutouxn0的博客
06-02 1676
一、实验目的：掌握JavaScript的变量；掌握JavaScript的数据类型；掌握JavaScript 的运算符；掌握JavaScript 的逻辑控制语句。掌握JavaScript数组和函数的使用方式。二、实验内容1、给定数组var numberList = [35,23,30,40,12,18,21,15,49,8,37,10]，以30为基准，使得数组numberList以30为界形成两个子集，数组前子集"小于30"，后子集"大于等于30"，并输出结果。 2、使用javascript的数组和数学对
23215120613王祉琪web实验2.zip
05-21
在给定的压缩包文件"23215120613王祉琪web实验2.zip"中，只有一个子文件"23215120613王祉琪web实验2.html"。从这个文件名我们可以推测，这可能是一个与Web开发相关的实验作业或项目，由学生王祉琪完成，编号可能是...
web实验2 CSS基本语法.zip
06-27
实验内容：1.CSS的引入和基本选择器应用;2.利用CSS对网页进行控制；3.利用DIV+CSS实现如图2-3、2-4网页效果的布局和设计，并在多种浏览器上测试。所需图片见附件。4.利用DIV+CSS实现如图2-5网页效果，并在多种浏览器...
web实验2制作简单网页（HTML+CS.html
10-07
web实验2制作简单网页（HTML+CS.html
课程作业-基于Java实现web实验登录界面源码+项目说明.zip
10-18
课程作业-基于Java实现web实验登录界面源码+项目说明.zip课程作业-基于Java实现web实验登录界面源码+项目说明.zip课程作业-基于Java实现web实验登录界面源码+项目说明.zip课程作业-基于Java实现web实验登录界面源码+...
前端用html写excel文件直接打开
全易
09-10 706
html文件直接用excel打开
-webkit-box-reflect属性与倒影效果的实现
读心悦
09-13 417
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 415
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Layout 布局组件快速搭建
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
09-13 1338
Layout 布局组件快速搭建： 1. 设置主题样式变量 2. 封装公共布局组件 3. 经典布局 4. 水平布局 5. 响应式布局 6. 搭建 Layout 布局组件 7. 添加 Layout 路由配置 8. 启动项目
前端项目node版本问题导致依赖安装异常的处理办法
最新发布
weixin_44703272的博客
09-14 286
解决前端项目中的Node版本问题通常涉及以下步骤：检查项目文档：查看项目是否有特定的Node版本要求，如果有，确保你的Node版本与之兼容。使用Node版本管理器：如nvm（Node Version Manager）或n。它们可以让你在同一台机器上安装和切换不同版本的Node。
Web实验教程：ASP与CSS实践
"这是一份针对学生的Web实验指导书，涵盖了使用ASP和CSS进行网页设计以及JavaScript编程的基础知识。实验内容包括HTML基本元素的使用、CSS样式应用、JavaScript交互功能的实现，旨在提升学生的Web开发技能。" 实验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值