简单的网页制作

最新推荐文章于 2024-08-06 09:44:44 发布
最新推荐文章于 2024-08-06 09:44:44 发布
阅读量608 收藏 1
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/XiaoZhuang__/article/details/78703237
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>周考模拟</title>
        <style>
            .div1{
                width: 1010px;
                height: 490px;
                }
    
            .div2{
                width: 1010px;
                height: 390px;
            }   
            .div3{
                position: relative;
                width:335px;
                height: 390px;
                float: left;
            }
            .div4{
                width:340px;
                height: 390px;
                float: left;
                margin-left: 10px;
            }
            .div5{
                width:315px;
                height: 390px;
                float: left;
                margin-left: 10px;
            }
            ol li{
                color: seashell;
                font-size: 24px;
                list-style: none;
                float: left;
                margin-top: 10px;
                margin-left: 23px;
            }
            .tou span{
                margin-top: 10px;
                float: left;
            }
            ul{
                margin-left: 600px;
            }
            ul li{
                color: #B6B6BE;
                font-size: 18px;
                list-style: none;
                float: left;
                margin-left: 17px;
                margin-top: 10px;
            }
            #yl:hover{                
                transform: rotate(360deg);
                transition: all 2s;
            }
            .im1{
                position:relative;
                top: -50px;
                

            }

           //当屏幕改变时进行移动

            @media only screen and (max-device-width:1024px ) {
                .div5{
                    width: 400px;
                }
                #ta{
                    font-size:10px
                }
            }
        </style>
    </head>
    <body>
        <center>
            <div class="div1">    
                   <table id="ta" style="font-size: 20px;width: 1010px;">
                       <tr>
                           <td>头条</td>
                           <td>社会</td>
                           <td>军事</td>
                           <td>娱乐</td>
                           <td>国际</td>
                           <td>国内</td>
                           <td>健康</td>
                           <td>体育</td>
                           <td>图片</td>
                           <td>汽车</td>
                           <td>科技</td>
                           <td>财经</td>
                           <td>星座</td>
                           <td>更多<span style="font-size: 15px;">∨</span></td>
                       </tr>
                   </table>
                
                <div class="tou" style="background:white;">
                    <span style="color: red;font-size: 22px;"><b id="yl" style="display: block;">娱乐</b></span><span style="color: #B6B6BE;margin-top: 18px;margin-left: 10px;font-size: 13px;">ENTERTAINMENT</span>
                    <ul>
                        <span id="uu">
                        <li>电视</li>
                        <li>|</li>
                        <li>电影</li>
                        <li>|</li>
                        <li>综艺</li>
                        <li>|</li>
                        <li>八卦</li>
                        <li style="font-size: 15px;margin-top: 15px;margin-left: 25px;">更多</li>
                        <li style="color: red;margin-top: 1px;margin-left: 5px;">●</li>
                        </span>
                    </ul>
                </div>
                
                <div class="div2">
                    
                    <div class="div3">
                        
                        <div style="width: 330px;height: 180px;background:#B6B6BE;">
                            <img id="lc" src="img/lc.jpg" style="width: 330px;height:150px;" />
                        <span><<猎场>></猎场>火了,深圳市一位市民的电话也</span>
                        </div>
                        <br/>
                        <span><span style="color: red;margin-left: -5px;margin-right: 5px;">●</span>父亲比肩李嘉诚，自己美貌不输范冰冰，今</span>                       
                        <div style="width: 330px;height: 188px;">
                            <br/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: 3px;">●</span>“紫薇”海陆获清新女艺人奖，33岁她穿长裙秀</span>
                            <br/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: 3px;">●</span>王心凌出席活动,整容失败满脸褶皱显老态甜心教</span>
                            <br style="margin-top:10px;"/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;">●</span>谢天谢地！我们曾遇到最好的歌一听就是一辈子</span>
                            <br style="margin-top:10px;"/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;">●</span>郭碧婷裹披肩口罩遮面现身机场美丽动人，网友</span>
                            <br style="margin-top:10px;"/>
                        </div>
                    </div>
                    
                    <div class="div4">
                        <span><span style="color: red;margin-left: -5px;margin-right: 5px;">●</span>谁说TVB电视剧已经没有看头了，明明还有这</span>
                         <div style="width: 330px;height: 188px;">
                            <br/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: -1px;">●</span>63岁成龙和54岁李连杰的最大差距，9岁之差，</span>
                            <br/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: 4px;">●</span>【图】宋仲基个人资料一览 颜值演技并存的实力</span>
                            <br style="margin-top:10px;"/>
                            <span style="font-size: 15px;color: #B6B6BE;margin-left: -43px;"><span style="font-size: 9px;color: #B6B6BE;margin-left: -3px;">●</span>日系的帅哥是这个地球新生代高颜值物种</span>
                            <br style="margin-top:10px;"/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: 3px;">●</span>《甄嬛传》中小丫鬟？比赵薇还“学霸”， 章子</span>
                            <br style="margin-top:10px;"/>
                        </div>
                        <span><span style="color: red;margin-left: -5px;margin-right: 5px;">●</span>欧阳娜娜亲下厨 一盘蛋炒饭几乎看不到饭粒</span>
                         <div style="width: 330px;height: 188px;">
                            <br/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: -4px;">●</span>46岁小虎队陈志朋放飞自我!雷人造型有点“作</span>
                            <br/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: 3px;">●</span>周星驰出名的敬业，但《食神》这个镜头，还真</span>
                            <br style="margin-top:10px;"/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: 3px;">●</span>当红小生出道前后对比，鹿晗杨洋马天宇气质蜕</span>
                            <br style="margin-top:10px;"/>
                            <span style="font-size: 15px;color: #B6B6BE;"><span style="font-size: 9px;color: #B6B6BE;margin-left: 3px;">●</span>27岁林允儿出席活动大秀好身材，网友：受不了</span>
                            <br style="margin-top:10px;"/>
                        </div>
                    </div>
                    
                    <div class="div5">
                        <span style="margin-left: -240px;"><b>八方<i style="color: red;">爆料</i></b></span>
                        <table cellpadding="0px">
                            <tr>
                                <td class="td2">
                                <img onmousemove="fun(this)" onmouseout="fu1(this)" style="width: 150px;height: 100px" src="img/lst1.jpg" />    
                                </td>
                                <td class="td2">
                                    <img onmousemove="fun(this)" onmouseout="fu1(this)" style="width: 150px;height: 100px" src="img/lit2.jpg" />
                                </td>
                            </tr>
                            <tr style="margin-left: 10px;">
                                <td style="margin-top: -20px;">谢天谢地！我们曾遇到最好的歌，一听就</td>
                                <td>谢天谢地！我们曾遇到最好的歌，一听就</td>
                            </tr>
                        
                            <tr>
                                <td style="margin-top: -20px;">谢天谢地！我们曾遇到最好的歌，一听就</td>
                                <td class="td2">
                                <img onmousemove="fun(this)" onmouseout="fu1(this)" style="width: 150px;height: 100px" src="img/20171202014843_302bbb4a40adb154553f7e87a03c70e9_5_mwpm_05501609.jpg" />    
                                </td>
                                
                            </tr>
                            <tr style="margin-left: 10px;">
                                <td style="margin-top: -20px;">谢天谢地！我们曾遇到最好的歌，一听就</td>
                                <td class="td2"><img onmousemove="fun(this)" onmouseout="fu1(this)" style="width: 150px;height: 100px" src="img/20171202014742_8e383ae3fa7b30122d873623a43eea2c_1_mwpm_05501609.jpg" /></td>
                            </tr>
                            </table>
                    </div>
                </div>                
            </div>
        </center>
        <script type="text/javascript">
            window.onload=function(){
                var lc=document.getElementById("lc");
                lc.style.transform="scale(1.1)";
                lc.style.transition="all 2s"
                
            var ta=document.getElementById("ta");
            ta.onmousemove=function(){
                ta.style.background="red";
                ta.style.transform="scale(1.2)";
                ta.style.color="yellow";
                ta.style.transition="all 2s";
            }
            ta.onmouseout=function(){
                ta.style.background="white";
                ta.style.transform="scale(1)";
                ta.style.color="black";
                ta.style.transition="all 2s";
            }        
            }    
            function fun(a){
                var im2=document.getElementById("im2");
                var im=document.createElement("img");
                im.src="img/arrow-down-b.png";
                im.setAttribute("class","im1");
                im.setAttribute("id","im2");
                im.style.width="50px";
                im.style.height="50px";
                if(im2==null){
                a.parentNode.appendChild(im);
                }
             }
            function fu1(a){
                history.go(0);
             }
        </script>
    </body>
</html>
简单网页制作
07-31
简单的一个网页制作小项目，有数据库的连接。很好的学习网页前段的的制作，和简单的与后台数据库的交流。
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 7万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
HTML网页设计
qq_61802519的博客
08-06 457
学习使用html语言设计网页。
制作一张简单的网页
xiaozhi_95的博客
07-31 1685
一.写网页的基本格式 1.下面是写一张html文件的基本格式： &lt;html&gt; &lt;head&gt;...&lt;/head&gt; &lt;body&gt;...&lt;/body&gt; &lt;/html&gt;2.在head的标签里，也可以添加其他的一些标签，而绝大部分这些标签是不会作为内容显示在网页给读者看的，下面是可以用在head标签里的一些常用标签： ...
一个简单的网页制作期末作业，学生个人html静态网页制作成品代码
08-10
#### 三、网页制作流程 - **布局设计**: 采用的是浮动布局结构，这是一种流行的网页布局方法，能够适应各种浏览器，并保持良好的视觉效果。 - **编程语言**: 使用HTML5+CSS3+JS进行编程，这些是最新的网页开发标准和...
学生旅游景点网页设计模板 静态HTML我的家乡网页设计作业 DIV CSS广西梧州简单网页制作成品下载
11-15
“DIV CSS广西梧州简单网页制作成品下载”进一步揭示了网页的构建方式。DIV是HTML中的一个布局容器，常用来组织网页的结构，CSS（层叠样式表）则用于控制网页的样式和布局，使得网页设计更为美观和响应式。由于描述...
html简单网页代码/简单html静态网页代码/简单网页设计模板html【html简单网页代码模板】
最新发布
02-24
html简单网页代码/简单html静态网页代码/简单网页设计模板html/html简单网页代码模板 压缩包中有以下源码【2、3为附赠代码】 1、本套导航代码https://www.hybiaobai.cn/tools/ 2、图床源页面代码...
数字媒体基础与实践+简单网页设计制作+实验报告（完整版）
06-01
完整的简单网页设计制作和完整的实验报告：可以自己稍微改一下，就可以提交了。 包括：网页部分、psd制作、flash制作（fla文件和swf文件），css文件，hmtl文件，js文件........ 特别适合大学生的网页设计制作课程的...
简单网页设计制作+完整实验报告+大学生网页课题作业参考
06-01
完整的简单网页设计制作和完整的实验报告 包括：网页部分、psd制作、flash制作（fla文件和swf文件），css文件，hmtl文件，js文件........ 实验目的和要求 1、学会图像处理软件Photoshop CS4的基本使用方法。能熟练...
简单网页制作代码
02-03
简单网页制作，对于刚从事开发的人，可以作为参考。
简单网页制作成品
06-05
简单的网页制作成品，网页制作入门，是比较简单的登录页面，适合刚接触网页制作的人群参照使用
一个简单的网页设计
12-19
一个简单的网页设计，看到好多学生都在淘宝，京东花钱购买，希望诸君下载后借鉴即可，不用照搬
简单的H5网页制作
01-08
制作的一个很简单的关于民谣的H5网页，里面有一些简单的hover动画和JQL动画，拿来应付大学作业够了
自己制作的一个简单的HTML网页
12-20
自己制作的一个简单的HTML网页
简单个人网页制作
AomanHao的博客
12-29 5682
Java web<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 许巍-巍你而来 </title> <style type="text/css"> color : blue; font
制作一个简单的网页（入门篇）
weixin_51601437的博客
06-06 3万+
使用HTML和CSS来制作一个简单的网页前言一、HTML1.1常见元素介绍1.2借助工具，浏览器开发者工具二、实现个人名片1.基本框架2.使用CSS美化1.CSS书写位置1、以元素的style 属性来指定 （内联样式）2、以style 标签包裹 （内部样式）3、以外部文件的方式 （外部样式）2.CSS中的选择器1.标签选择器2.id选择器3.类选择器4.子元素选择器 前言 HTML负责描述了网页的整体骨架 CSS负责描述了页面样式 利用其完成一个简单的个人建立网页。 一、HTML HTML不是
制作的简单网页
SunChao3555的博客
02-11 601
主要包括css样式选择器的使用，以及利用相对位置，绝对位置，固定位置的相互关系实现导航条浮动显示&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;我的主页&lt;/title&gt; &lt;s
如何制作一个简单的网页
Through123456的博客
10-29 1461
如何做一个简单的网页
简单网页制作基础：div与css的应用
简单网页制作的步骤 1. 设计页面布局：确定网页的结构和内容布局，规划好各个部分的位置。 2. 编写HTML代码：根据设计的布局，使用合适的HTML标签编写网页内容。 3. 应用CSS样式：通过CSS对HTML元素进行样式设计，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值