精华内容
下载资源
问答
  • HTML网页设计

    万次阅读 多人点赞 2018-06-21 16:39:40
    html网页设计里面平铺背景图片的代码如下:<html> <body> <div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%&...

    html网页设计里面平铺背景图片的代码如下:

    <html>  
    <body>  
    <div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">  
    <img src=https://zhidao.baidu.com/question/"pictures/background.jpg" width="100%" height="100%"/>  
    </div>  
    </body>  

    </html>



    HTML网页设计 

    网页设计--根据企业希望向浏览者传递的信息(包括产品、服务、理念、文化),进行网站功能策划,然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种,精美的网页设计,对于提升企业的互联网品牌形象至关重要。

    网页设计一般分为三种大类:功能型网页设计(服务网站&B/S软件用户端)、形象型网页设计(品牌形象站)、信息型网页设计(门户站)。设计网页的目的不同,应选择不同的网页策划与设计方案。

    网页设计的工作目标,是通过使用更合理的颜色、字体、图片、样式进行页面设计美化,在功能限定的情况下,尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。

    html网页设计里面平铺背景图片的代码如下:

    <html>  
    <body>  
    <div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%">  
    <img src=https://zhidao.baidu.com/question/"pictures/background.jpg" width="100%" height="100%"/>  
    </div>  
    </body>  
    </html>

    网页背景默认是平铺整个屏幕的,可能有以下原因导致不能平铺:

    1、图片不够大,又background属性不能拉伸图片; 

    2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> ;

    3、body的background属性去掉,要不然会被遮住。

    展开全文
  • html网页设计

    千次阅读 2018-01-28 00:41:54
    1 网页介绍 静态网页与动态网页: ... 动态网页:页面的内容是由服务器端程序控制输出,比如不同的人使用相同的网站,但是显示的当前用户是不一样的。 两者区别:静态就是我们写什么就显示...2 第一个html网页 ...

    1 网页介绍

    静态网页与动态网页:
    
        静态网页:我们写好的html内容在浏览器中显示出来的效果始终都一样,不管进行多少次访问,如果想内容改变必须修改源代码。
    
        动态网页:页面的内容是由服务器端程序控制输出,比如不同的人使用相同的网站,但是显示的当前用户是不一样的。
    
        两者区别:静态就是我们写什么就显示什么,而动态通过程序的控制输出内容。
    

    2 第一个html网页

    <html>
    <body>
    
    <h1>My First Heading</h1>
    
    <p>My first paragraph.</p>
    
    </body>
    </html>
    

    3 超链接标签

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>超链接</h3>
        <!-- blank表示另起一页打开空白,_self表示在本页打开 不过默认在本页打开-->
        <a href="hello.html" target="_self">点我啊</a>
    </body>
    </html>

    4 图片标签

    必须属性:

        alt text 规定图像的替代文本。 STF 
    
        src URL 规定显示图像的 URL。 STF  
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <!--利用图片做超链接-->
        <a href="hello.html" target="_self"><img src="images/110.png" alt="孙悟空大战奥特曼" title="师姐第三" border="5"/></a>
        <img src="images/three.jpg" alt="孙悟空大战奥特曼" title="师姐第三" border="10"  width="500" height="400"/>
    </body>
    </html>

    5 列表标签

    有序列表:

        列表项目使用数字进行标记。
    
        有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
    

    无序列表:

        无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
    
        无序列表始于 <ul> 标签。每个列表项始于 <li>。
    

    定义列表:

        自定义列表不仅仅是一列项目,而是项目及其注释的组合。
    
        自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <!--有序链表-->
        四大美女
        <!-- 1数字A字母a字母,I数字V i是vi -->
        <ol type="I">
        <li>西施</li>
        <li>王昭君</li>
        <li>貂蝉</li>
        <li>杨玉环</li>
        </ol>
    
        <!--无序链表-->
        四大美女
        <!-- square方块,circle圆圈 默认是点 -->
        <ul type="circle">
        <li>西施</li>
        <li>王昭君</li>
        <li>貂蝉</li>
        <li>杨玉环</li>
        </ul>
    
        <!--定义链表-->
        <dl>
        <dt>四大妹妹</dt>
        <dd>西施</dd>
        <dd>王昭君</dd>
        <dd>貂蝉</dd>
        <dd>杨玉环</dd>
        </dl>
    
        <!--自定义的嵌套列表-->
        <dl>
            <dt>java</dt>
                <dd>javaSE</dd>
                <dd>
                        <dl>
                            <dt>javaEE</dt>
                            <dd>Strus2</dd>                 
                            <dd>Hibernate</dd>                  
                            <dd>Spring</dd>                 
                        </dl>
                </dd>
                <dd>javaME</dd>
            <dt>html汉语</dt>
        </dl>
    </body>
    </html>

    6 表格标签

    每个表格由 table 标签开始。

    每个表格行由 tr 标签开始。

    每个表格数据由 td 标签开始。

    <table> 定义表格 
    <caption> 定义表格标题。 
    <th> 定义表格的表头。 
    <tr> 定义表格的行。 
    <td> 定义表格单元。 
    <thead> 定义表格的页眉。 
    <tbody> 定义表格的主体。 
    <tfoot> 定义表格的页脚。 
    他们三的作用:就算被打乱了还是从thead,tbody,tfoot这个顺序,可以增加用户体验,及时缓冲出表头跟尾巴这些重要信息
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <!-- width占浏览器的80%  padding单元格边距   spacing单元格间距 -->
        <table border="1" width="80%" cellpadding="0" cellspacing="0">
    
            <!-- 表名 -->
            <caption>学生列表</caption>
    
            <thead>
                <tr style="background: gray">
                    <th>id</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                </tr>
            </thead>
    
            <tfoot>
                <!-- center居中显示 -->
                <tr align="center">
                    <td colspan="4"><a href="">首页</a><a href="">上一页</a><a href="">下一页</a><a
                        href="">尾页</a> 第4/6页 总共有46条数据</td>
                </tr>
            </tfoot>
    
            <tbody>
                <tr>
                    <td>10</td>
                    <td>乔峰</td>
                    <td>30</td>
                    <td></td>
                </tr>
                <tr style="background: yellow;">
                    <td>20</td>
                    <td>西门</td>
                    <td>28</td>
                    <td></td>
                </tr>
                <tr>
                    <td>30</td>
                    <td>莲莲</td>
                    <td>20</td>
                    <td></td>
                </tr>
            </tbody>
    
        </table>
    </body>
    </html>

    8 表单标签

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>用户注册</h3>
        <!-- form:表单域,可以包含多个input元素(输入框/下拉列表/单选框/复选框...) 
            属性:
                action:把表中的数据提交给哪一个资源来做处理
                method:单元的提交方式:get(缺省),post
                enctype:表示表单的编码规范,文件上传时的时候使用二进制编码,其他情况不变
        -->
    
        <form action="#" method="get">
    
        </form>
    </body>
    </html>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>用户注册</h3>
        <form action="#" method="get">
            <!-- hidden是隐藏值 -->
            <input type="hidden" name="id" value="123456"/>
                <!-- readonly只读  disabled="disabled"灰色不可用的 只要跟前面的相同可以只用一个单词就行-->
            账号:<input type="text" name="username" value="默认值"/><br/>
            密码:<input type="password" name="password"/><br/>
            <!-- checked默认选中的 -->
            性别:<input type="radio" name="gender" value="boy" checked/><input type="radio" name="gender" value="boy"/><input type="radio" name="gender" value="boy"/>保密<br/>
            爱好:<input type="checkbox" name="hoby" checked/>java
                 <input type="checkbox" name="music"/>听歌
                 <input type="checkbox" name="boll"/>打篮球
                 <input type="checkbox" name="games"/>LOL
                 <input type="checkbox" name="phonegames"/>海岛奇兵<br/>
            头像:
                <input type="file" name="headImg"/>  <br/><hr/>
            城市:<!-- value设置"gz"最上面的网址行显示的是gz-->
                 <!-- multiple可以同时选择多个选项  size同时显示几个值-->
                <select name="city" multiple size="1">
                    <option  value="gz">广州</option>
                    <option>佛山</option>
                    <option>深圳</option>
                    <option>湛江</option>
                </select><br/>
            简介:
                <!-- 有30个列,可以写5行 -->
                <textarea name="intro" row="30" cols="30">个人简介</textarea>
            <br/>
            <!--    <input type="image" src="images/110.png"/>    -->   
            <input type="button" value="普通按钮" onclick="alert(1)"/>
            <input type="submit" value="朕要注册" />
            <input type="reset" value="重置"/>
        </form>
    </body>
    </html>

    html5新特性

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>用户注册</h3>
        <form action="#" method="get">
                <!-- required必填属性
                     date格式
                     数字模式
                     最大最小
                     占位符关键字
                     颜色
                 -->
            账号:<input type="text" name="username" required/><br/>
            邮箱:<input type="email" name="email" required/><br/>
            年龄:<input type="date" name="age"/><br/>
            手机:<input type="number" name="tel"/><br/>
                    <!--  max="10" min="1" 属性值最大最小值-->
                  <input type="search" name="keyword" placeholder="关键字"/>
                  <input type="color">
            <br/>
            <input type="submit" value="朕要注册"/>
        </form>
    </body>
    </html>

    9 框架标签

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <frameset rows="15%,*,5%">
            <frame src="top.html"/>
            <frameset cols="300,*">
                <frame src="menu.html" noresize/>       
                <frame src="welcome.html" name="main"/>
            </frameset>
            <frame src="foot.html"/>
    </frameset>
    <noframes>
    <body>
            浏览器版本过低,请升级
    </body>
    </noframes>
    </html>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv = "Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
        <h3>菜单信息</h3>
            四大美女
            <ul type="square">
                <li><a href="xishi.html" target="main">西施</a></li>
                <li><a href="zhaojun.html" target="main">王昭君</a></li>
                <li><a href="">貂蝉</a></li>
                <li><a href="">杨玉环</a></li>
            </ul>
    </body>
    </html>

    10 CSS概述

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
        <style type="text/css">
            /* css代码*/
            div{
                background-color:green;
            }
        </style>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div style="background-color: yellow">DIV1</div>
        <div style="background-color: orange">DIV2</div>
        <div style="font-size: 30px; color: red;">DIV3</div>
    </body>
    </html>

    调用下面的index.css代码

    /*全局的样式信息*/
    div{
        background-color:green;
    }

    标签选择器,类别选择器,id选择器…

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
        <style type="text/css">
            <!--标签选择器-->
            div{
                background-color:red;
            }
            p{
                background-color:yellow;
                font-size:30px;
                color:white;
            }
            <!--类别选择器-->
            .haha{
                background-color:green;
            }
            <!--id选择器-->
            #div1{
                background-color:black;
            }
        </style>
    </head>
    <body>
        <div class="haha" id="div1">DIV1</div>
        <div id="div2">DIV2</div>
        <div>DIV3</div>
        <p class="haha">p1</p>
        <p>p2</p>
        <apan>span</apan>
    </body>

    11 JS 概述

    /*要求:
    * 1.定义变量
    * 2.定义函数/调用函数
    * 3.获取指定id的元素
    * 4.提交表单
    */

    index.html文件

    <body>
            你好
            <a href="javascript:alert(22)">点我</a>
            <div id="div1">DIV1的内容</div>
            <div>DIV2的内容</div>
            <div>DIV3的内容</div>
    
            <form action="#" id="xx">
                <input type="text" name="username"/>
                <input type="button" value="提交" onclick="submitForm()"/>
            </form>
    </body>

    index.js文件

        function show(){
            alert("哈哈,函数");
        }
        show();
    
    
        function show(name){
            alert("你好"+name);
        }
        show("乔峰");
        show("阿朱");
    
        function getSun(x,y){
            return x+y;
        }
        var ret = getSun(2,5);
        console.debug("结果="+ret);
        function submitForm(){
            //提交表单的代码
            //获取表单对象
            //var form = document.forms[0];
            var form = document.getElementById("xx");
            //提交表单
            form.submit();
        }
    展开全文
  • html网页设计大作业

    热门讨论 2018-01-04 16:36:21
    html网页设计大作业,关于植物,包含7个页面,css文件
  • HTML网页设计基础笔记 • 【目录】

    千次阅读 多人点赞 2020-03-22 10:14:28
  • HTML网页设计结课作业——19张精美网页!

    万次阅读 多人点赞 2019-12-19 18:16:36
    什么高数啊、线代啊、C语言、网页设计等,简直让人头大。你还在为网页设计老师的作业要求感到头大?网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本...

    临近期末,大一新生的各种考试和专业结课作业纷至沓来。什么高数啊、线代啊、C语言、网页设计等,简直让人头大。你还在为网页设计老师的作业要求感到头大?网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求(博主之前的一个质量比较高的博客:C语言学生信息管理系统)。废话不多说,直接看效果,免得说我骗你们。

    首页

     

    首页底部

     

    网站地图

     

    网站地图底部

     

    Aime主页

     

    文章内容

     

    根目录
    ​​​​​​

     

    栏目目录

     

    栏目目录

     

    标题

     

    --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    接下来就是代码了:需要全部代码请关注公众号:木节学编程,后台回复“html作业”即可获得。

    --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    <html>
        <head>
            <title>Aime-toi个人博客</title>
            <link rel="shortcut icon" href="images/QQ图片20191129104345.jpg" />
            <link href="css/style2.css" rel="stylesheet" type="text/css" media="all">
            <link rel="stylesheet" href="css/animate.min.css">
            
            <!-- 用于背景动态样式 -->
            <!-- <link rel="stylesheet" href="css/style2.css" type="text/css" /> -->
    
            <script src="js/wow.min.js"></script>
            <script src="js/jquery-1.12.4.min.js"></script>
            <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
            <script>
                if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
                new WOW().init();
            };
            </script>
    
            <!-- 响应式布局 -->
            <meta http-equiv="Cache-Control" content="no-transform" />
            <meta http-equiv="Cache-Control" content="no-siteapp" />
            <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    
            <!--  -->
            <!-- 用于背景动态样式 -->
            <!-- <script type="text/javascript" src='js/TweenMax.min.js'></script>
            <script type="text/javascript" src="js/index.js"></script> -->
            
        </head>
        <body>
            <header class="header">
                <div class="logo">
                    <img src="images/QQ图片20191129104345.jpg" class="xwcms" onmouseover="this.src='images/QQ图片20191129104345.jpg'"
                     onmouseout="this.src='images/QQ图片20191129104345.jpg'" />
                    <div class="logo-text">Aime-toi<span style="color:#FF6347;font-size:1.4em;">'S</span>个人博客</div>
                </div>
                <div class="right-block">
                    <div class="wow pulse bg-yellow" data-wow-delay="0.1s">人生,</div>
                    <div class="wow rollIn bg-red" data-wow-iteration="1" data-wow-duration="0.5s">就像一盒巧克力,</div>
                    <div class="wow bounceInRight bg-blue">你永远不知道下一块会是什么味道!</div>
                    <div class="wow bounceInRight bg-blue">---《阿甘正传》</div>
                </div>
            </header>
            <!--   -->
    
            <!--   -->
            <div class="clear">
            </div>
            <nav id="nav" class="nav-wrap">
                <ul class="clearfix">
                    <li class="menuactive">
                        <a href="#">
                            首页
                        </a>
                    </li>
    
                    <li>
                        <a href="Program/index.html">
                            编程专栏
                        </a>
                    </li>
    
                    <li>
                        <a href="HTML/index.html">
                            HTML专栏
                        </a>
                    </li>
    
                    <li>
                        <a href="Life/index.html">
                            生活专栏
                        </a>
                    </li>
    
                    <li id="navEnd">
                        <a href="Personal/index.html">
                            个人中心
                        </a>
                    </li>
                    
                    <li id="navEnd">
                        <a href="map.html">
                            网站地图
                        </a>
                    </li>
                    
                    <div class="Alert" style="width: 400px; height:100%;float: right;">
                        <div class="Alert_text" style="margin: 10px;color: black;text-align: center;font-size: 17px;">
                            <strong><a href="https://aimetoi.github.io" target="_blank">本网页部分内容托管到了Github,请联网访问!</a></strong>
                        </div>
                    </div>
                    
                </ul>
            </nav>
    
            <section class="banner">
                <div class="youtiy_slider">
                    <div class="bd">
                        <ul>
                            <li><a target="_blank" href="http://aimetoi.github.io"><img src="plugin/SuperSlide/images/1.jpg" /></a></li>
                            <li><a target="_blank" href="http://aimetoi.github.io"><img src="plugin/SuperSlide/images/2.jpg" /></a></li>
                            <li><a target="_blank" href="http://aimetoi.github.io"><img src="plugin/SuperSlide/images/3.jpg" /></a></li>
                        </ul>
                    </div>
                    <div class="hd">
                        <ul>
                        </ul>
                    </div>
                    <div class="pnBtn prev"><span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a></div>
                    <div class="pnBtn next"><span class="blackBg"></span> <a class="arrow" href="javascript:void(0)"></a></div>
                </div>
            </section>
    
            <section class="container-content">
                <div class="article-list">
                    <div class="item">
                        <div class="art-img">
                            <img src="images/CStuSystem.jpg" />
                        </div>
                        <div class="title">
                            <a href="Program/CStuSystem.html">C语言学生信息管理系统</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            前文是楼主的一些经历,给大家分享一下,希望能够帮到大家。文中有不足的地方还请指出,我们一同探讨,或者可以直接看正文。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/CSS_30_1.jpg" />
                        </div>
                        <div class="title">
                            <a href="HTML/CSS_30_1.html">熟记30个CSS选择器(上)</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/CSS_30_2.jpg" />
                        </div>
                        <div class="title">
                            <a href="HTML/CSS_30_2.html">熟记30个CSS选择器(下)</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Self.jpg" />
                        </div>
                        <div class="title">
                            <a href="Life/Self.html">你是怎么变自律的?</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            普遍认为,当我们能抵挡住诱惑并能够自我约束时,称之为自律,但当我们能够做到这些时,真的就是自律吗?
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Website_18.jpg" />
                        </div>
                        <div class="title">
                            <a href="HTML/Website_18.html">私藏的18个黑科技网站</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            要说现在啊,我们使用频率最高的设备是啥,那一定是手机啊,几乎不离身,没了它,生活就索然无味啊,除了手机,对我来说,排在第二位的就是电脑了。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Java.jpg" />
                        </div>
                        <div class="title">
                            <a href="Program/Java.html">为什么一些人瞧不起Java等其他语言</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            编程是信仰!信仰是不兼容的!!当然,上边那些其实都是半桶水。真正的高手是万物皆为我所用一切皆可信手拈来的。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Program_Habit.jpg" />
                        </div>
                        <div class="title">
                            <a href="HTML/Program_Habit.html">6个编程好习惯</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            是不是感觉自接触编程以来,每天都在努力的学习,但是学习的速度还是跟不上别人的速度?不是你不够努力,只是别人的方法更高效!
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/C++.jpg" />
                        </div>
                        <div class="title">
                            <a href="Program/C++.html">感受C++的痛楚</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            当你做了几年c++程序员后,很自信地觉得自己已经掌握了这阶段,当重新对这门语言来个彻底大扫除的时候发现,又有新的语法出现。
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Health.jpg" />
                        </div>
                        <div class="title">
                            <a href="Life/Health.html">健康生物钟</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            你是不是曾经也很纳闷,为什么你能坚持到凌晨两点,而你的朋友晚上十点就挺不住了吗?
                        </div>
                    </div>
    
    
                    <div class="item">
                        <div class="art-img">
                            <img src="images/Programmer.jpg" />
                        </div>
                        <div class="title">
                            <a href="Life/Programmer.html">程序员的自我修养</a>
                        </div>
                        <div class="base-info">
                            <ul>
                                <li>
                                    <img src="images/QQ图片20191129104345.jpg" class="xwcms2" />
                                </li>
                                <li>
                                    <a href="http://aimetoi.github.io">Aime-toi</a>
                                </li>
                                <li>
                                    发布时间: 2019-12-02 12:00
                                </li>
                            </ul>
                        </div>
                        <div class="desc">
                            想必,你们一定看过很多关于程序员的自我修养的文章。
                        </div>
                    </div>
                </div>
    
    
                <div class="right-fun">
                    <div class="model">
                        <div class="title">站内搜索</div>
                        <div class="content">
                            <div class="bar7">
                                <form>
                                    <input type="text" placeholder="请输入关键词">
                                    <button type="submit"></button>
                                </form>
                            </div>
                        </div>
                    </div>
    
                    <div class="model">
                        <div class="title">快捷菜单</div>
                        <div class="menu">
                            <span><a href="Personal/Diary.html">个人日记</a></span> 
                            <span><a href="Personal/Contact.html">联系我</a></span> 
                            <span><a href="Personal/About.html">关于我</a></span>
                            <span><a href="Personal/Msg.html">给我留言</a></span>
                        </div>
                    </div>
    
                    <div class="model recommend">
                        <div class="title">热门推荐</div>
                        <div class="content">
                            <p>
                                <a href="Program/CStuSystem.html">C语言学生信息管理系统</a>
                            </p>
                            <p>
                                <a href="Life/Self.html">你是怎么变自律的?</a>
                            </p>
                            <p>
                                <a href="HTML/Website_18.html">私藏的18个黑科技网站</a>
                            </p>
                            <p>
                                <a href="Program/Java.html">为什么一些人瞧不起Java等其他语言</a>
                            </p>
                            <p>
                                <a href="Program/C++.html">感受C++的痛楚</a>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
    
    
            <div class="clear">
            </div>
    
            <footer class="footer">
                <div class="footer_content">
                    <h2>Aime-toi<span style="color:#FF6347;">'S</span> 个人博客</h2>
                    <p>由<a href="http://aimetoi.github.io" target="_blank" style="color:white;text-decoration:underline;">沈栉博客</a>提供技术支持</p>
                    <p>© 2013-2019 aimetoi.github.io, all rights reserved</p>
                </div>
            </footer>
    
    
            <script src="plugin/SuperSlide/js/jquery.min.js"></script>
            <!-- <script src="js/jquery-1.12.4.min.js"></script> -->
            <script src="plugin/SuperSlide/js/superslide.2.1.js"></script>
            <script type="text/javascript">
                jQuery(".youtiy_slider .bd li").first().before(jQuery(".youtiy_slider .bd li").last());
                jQuery(".youtiy_slider").hover(function() {
                    jQuery(this).find(".arrow").stop(true, true).fadeIn(300)
                }, function() {
                    jQuery(this).find(".arrow").fadeOut(300)
                });
                jQuery(".youtiy_slider").slide({
                    titCell: ".hd ul",
                    mainCell: ".bd ul",
                    effect: "leftLoop",
                    autoPlay: true,
                    vis: 3,
                    autoPage: true,
                    trigger: "mouseover"
                });
    
    
                $(document).ready(function(e) {
                    var offset = 890;
                    $(window).on('scroll', function() {
                        if ($(this).scrollTop() > offset) {
                            $('.recommend').css('position', 'fixed');
                            $('.recommend').css('top', '0px');
                        } else {
                            $('.recommend').css('position', '');
                        }
                    });
                });
            </script>
    
    
        </body>
    </html>

    想要全部代码请扫描下方二维码,关注公众号:木节学编程,后台回复“html作业”即可获得。

    更多干货

    【干货分享】自学编程的小伙伴可以前往我的 Github 仓库(持续更新中...):

    📕【Java学习指南】从java基础、计算机基础到后端常用框架的教程,涵盖后端大部分必备知识(学习指南 + 技术文章 + 资源分享)

    Github仓库地址(来个Star吧~):https://github.com/MujieJava/JavaStudy

    展开全文
  • 一年一度的网页设计大赛即将拉开序幕,开始展示自己能力水平的时刻也终于来临!那么,你可否已准备好迎接它了呢?发挥自己的才能,锻炼自己的能力,提高自己的创意,推展自己的思维……开始尽情的大展身手吧!对于...
  • HTML网页设计中 link 和 @import 的区别

    万次阅读 2020-04-28 21:27:24
    HTML网页设计中 link 和 @import 的区别,使用用link和@import有什么区别? 页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部...
  • 学生北京故宫旅游网页设计作品作品介绍作品演示作品下载 作品介绍 本学生网站作业成品主题为北京故宫网页设计,采用DIV CSS布局制作,共5个页面,主要...故宫学生网页设计作品下载https://www.o29.cn/good/b/28.html
  • html网页设计模板

    千次阅读 2020-04-26 15:45:50
    https://webframe.xyz/
  • 12月12日,令人期待已久第十八届网页设计大赛决赛终于在九教二楼报告厅拉开了帷幕,不知小伙伴有没有去现场见识一下大佬们的大作呢?如果你没去,那正好,快点来和小壹一起去回顾一下那天网页设计大赛决赛现场的风采...
  • HTML网页设计语言入门基础教学视频

    千人学习 2017-08-16 16:46:08
    本课程为软件相关专业网页设计入门基础课程,课程共18讲,上课代码及PPT课件已经上传,可以直接下载使用。 主要课程内容如下:1.讲解HTML基本概念,HTML的基本结构;2.讲解表格与超级链接标签的使用方法;3.讲解字体...
  • HTML网页设计基础概念

    2021-01-25 19:12:24
    1.编辑第一个HTML网页 每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写的。 HTML页面也称为HTML文档。 基本结构标签名 功能快捷键 撤销: Ctrl + Z 保存: Ctrl + S 放大...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,719
精华内容 7,887
关键字:

html网页设计