使用HTML网页设计

最新推荐文章于 2024-08-23 20:19:03 发布
最新推荐文章于 2024-08-23 20:19:03 发布
阅读量121 收藏
点赞数
文章标签： html 前端 css Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74786610/article/details/128506883
版权

html大作业---个人网页设计

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？没有合适的模板？那不如看看我的吧！！

<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>个人介绍</title>
 <style type="text/css">
     * {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

body{
    background-color:lightpink;
}

#bigbox {
    width: 1000px;
    margin: 0 auto;
}

#banner {
    width: 1000px;
    font-size: 0px;
}

#banner img {
    width: 1000px;
}

nav {
    background-color: #hotpink;
    width: 1000px;
    height: 60px;
}

nav a {
    text-decoration: none;
    line-height: 60px;
    margin-left: 50px;
    margin-right: 50px;
    color: #020C16;
    font-weight: bold;
}

nav a:hover {
    color: #1a9be6;
}

.dangqian {
    color: #1a9be6;

}

#main {
    height: 500px;
    width: 1000px;
    margin: 0 auto;
    background-color: #ffb3a7;
}

#left {
    width: 300px;
    display: inline-block;
    background-color: #ffb3a7;
    float: left;
}

h2 {
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 20px;
    line-height: 30px;
    background-color: #03151F;
    color: #CCD0D9;
}

#left img {
    width: 300px;
}

#left p {
    margin-left: 10px;
    line-height: 40px;
}

#left span {
    font-weight: bold;
}

#right {
    position: relative;
    width: 680px;
    margin-left: 20px;
    display: inline-block;
    height: 200px;
}

#right img {
    position: absolute;
    width: 260px;
    right: 0px;
    top: 30px;
}

#right p {
    width: 400px;
    display: inline-block;
    margin-left: 10px;
    text-indent: 32px;
    line-height: 30px;
    margin-top: 10px;
}

#mn {
    background-color: pink;
    width: 1000px;
}

#mn div {
    font-size: 0px;
}

#picture {
    font-size: 0px;
    display: inline-block;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
}

#picture img {
    width: 200px;
}

#picture p {
    font-size: 16px;
    text-align: center;
    line-height: 60px;

}
#picture1 {
    font-size: 0px;
    display: inline-block;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
}

#picture1 img {
    width: 400px;
}

#picture1 p {
    font-size: 16px;
    text-align: center;
    line-height: 60px;

}

footer {
    line-height: 60px;
    font-size: 14px;
    text-align: center;
    background-color:#aaaadd;
}
#right ul li {
    width: 660px;
    margin-left: 10px;
    font-size: 12px;
    margin-top: 10px;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
}

#right ul li span {
    font-size: 14px;
    font-weight: bold;
}

#liuyan {
    width: 660px;
    margin-left: 10px;
    margin: 20px;
}

#liuyan span {
    display: inline-block;
    width: 80px;
    line-height: 40px;
}

button {
    width: 100px;
    height: 30px;
    margin-left: 80px;
}
     
 </style>

</head>

<body>
    <div id="bigbox">
        <!-- <div id="banner">
            <img src="mn1.jpg" alt="">
        </div> -->
        <nav>
            <a  class="dangqian"href="me.html">我的主页</a>
            <a class="dangqian" href="ms.html">热爱美食</a>
             
            <a class="dangqian"href="jx.html ">我的家乡</a>
            <a class="dangqian"href="ly.html">留言吧</a>
        </nav>
        <div id="main">
            <div id="left">
                <h2>关于我</h2>
                <img src=".jpg" alt="" >
                <p>
                    <span>姓名</span>:zqy<br>
                    <span>性别</span>:美女<br>
                    <span>爱好</span>:听歌 打游戏<br>
                    <span>性格</span> :开朗<br>
                    <span>家乡</span>:四川泸州<br>
                    <span>专业</span>:物联网应用技术
                </p >
            
                <img src="m.jpg" alt="">
            </div> 
            
   
        <div id="mn">
            <h2>美nv</h2>
            <div id="picture">
                    <img src="mn3.jpg" alt="">
                    <p>咦，是我</p >
                </div>
                <div id="picture">
                    <img src="mn6.jpg" alt="">
                    <p>
                        哟，还是我
                    </p >
                </div>
           
        </div>

       <div>
        <footer>
             <div id="picture1">
                <h2>喔唷，厉害</h2>
                    <img src="wz.jpg" alt="">
                   >
                </div>
                <div id="picture1">
                    <h2>嘿嘿，一般</h2>
                    <img src="wz1.jpg" alt="">
                    
                </div>
           
        </div>
           
        </footer>
    </div>
    </div>
</body>
<!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>个人介绍</title>
 <style type="text/css">
     * {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

body{
    background-color:lightpink;
}

#bigbox {
    width: 1000px;
    margin: 0 auto;
}

#banner {
    width: 1000px;
    font-size: 0px;
}

#banner img {
    width: 1000px;
}

nav {
    background-color: slateblue;
    width: 1000px;
    height: 60px;
}

nav a {
    text-decoration: none;
    line-height: 60px;
    margin-left: 50px;
    margin-right: 50px;
    color: #020C16;
    font-weight: bold;
}

nav a:hover {
    color: #1a9be6;
}

.dangqian {
    color: #1a9be6;

}

#main {
    height: 490px;
    width: 1000px;
    margin: 0 auto;
    background-color: #ffb3a7;
}

#left {
    width: 300px;
    display: inline-block;
    background-color: #ffb3a7;
    float: left;
}

h2 {
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 20px;
    line-height: 30px;
    background-color: #03151F;
    color: #CCD0D9;
}

#left img {
    width: 300px;
}

#left p {
    margin-left: 10px;
    line-height: 40px;
}

#left span {
    font-weight: bold;
}

#right {
    position: relative;
    width: 680px;
    margin-left: 20px;
    display: inline-block;
    height: 200px;
}

#right img {
    position: absolute;
    width: 260px;
    right: 0px;
    top: 30px;
}

#right p {
    width: 400px;
    display: inline-block;
    margin-left: 10px;
    text-indent: 32px;
    line-height: 30px;
    margin-top: 10px;
}

#ms {
    background-color: #86aacb;
    width: 1000px;
}

#ms div {
    font-size: 0px;
}

#picture {
    font-size: 0px;
    display: inline-block;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
}

#picture img {
    width: 200px;
}

#picture p {
    font-size: 16px;
    text-align: center;
    line-height: 60px;

}

footer {
    line-height: 60px;
    font-size: 14px;
    text-align: center;
    background-color:pink;
}
#right ul li {
    width: 660px;
    margin-left: 10px;
    font-size: 12px;
    margin-top: 10px;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
}

#right ul li span {
    font-size: 14px;
    font-weight: bold;
}

#liuyan {
    width: 660px;
    margin-left: 10px;
    margin: 20px;
}

#liuyan span {
    display: inline-block;
    width: 80px;
    line-height: 40px;
}

button {
    width: 100px;
    height: 30px;
    margin-left: 80px;
}
     
 </style>

</head>

<body>
    <div id="bigbox">
        <!-- <div id="banner">
            <img src="ms.jfif" alt="">
        </div> -->
        <nav>
            
             <a href="me.html">我的主页</a>
             <a class="dangqian" href="">热爱美食</a>
            <a href="jx.html ">我的家乡</a>
            <a href="ly.html">留言吧</a>
        </nav>
         < <div id="banner">
            <img src="ms.jfif" alt="">
        </div>
        <div id="main">
            <div id="left">
                <img src="ms2.jpg">
                <!-- <h2>关于我</h2>
                <img src=".jpg" alt="" >
                <p>
                    <span>姓名</span>:zqy<br>
                    <span>性别</span>:美女<br>
                    <span>爱好</span>:听歌 打游戏<br>
                    <span>性格</span> :开朗<br>
                    <span>家乡</span>:四川泸州<br>
                    <span>专业</span>:物联网应用技术
                </p > -->
            </div>
            <div id="right">
                <h2>热爱美食</h2>

                <p>
                    中华美食广而深，菜式门派八大系。
鲁川粤苏浙闽湘，徽菜目前排最后。
                </p >
                <p>
                    川菜起源川渝味，民间菜品最牛气。
麻辣鲜香清厚醇，一格一菜百种味。
夫妻肺片回锅肉，麻婆豆腐口水鸡。
黄敬临和张大千，开水白菜干烧鱼。
                </p >
                <p>
                    江苏菜系淮扬名，国宴菜品多且美。
选材严谨刀工细，讲究原味精于型。
水晶肴肉狮子头，大煮干丝叫花鸡。
文思豆腐天宁寺，松鼠桂鱼乾隆帝。
                </p >
                <p>
                    湘菜亦称湖南菜，辣味腊肉随手来。
夏要清淡与香鲜，热辣浓鲜过冬天。
东安子鸡臭豆腐，祖庵鱼翅外婆菜。
腊味合蒸有典故，剁椒鱼头黄宗宪。
                </p >
                <img src="ms.jpg" alt="">
            </div>
        </div>
        <div id="ms">
            <h2>美食</h2>
            <div>
                <div id="picture">
                    <img src="ms3.jpg" alt="">
                    <p>吃不吃火锅</p >
                </div>
                <div id="picture">
                    <img src="ms7.jpg" alt="">
                    <p>
                        吃不吃串串
                    </p >
                </div>
                <div id="picture">
                    <img src="ms4.jpg" alt="">
                    <p>
                        吃不吃烤肉
                    </p >
                </div>
                <div id="picture">
                    <img src="ms6.jpg" alt="">
                    <p>
                        吃不吃烧烤
                    </p >
                </div>
            </div>
        <div>
        <footer>
            <p>
                卧底
            </p >
        </footer>
    </div>
</body>

</html>

<body>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>主页</title>

<style type="text/css">

*{

background-color: pink;

}

#center{

width: 100%;

height: 70%;

background: pink;

}

}

#head{

background-color: #aaaaD9;

width: 100%;

height: 60px;

align-content: center;

}

head a {

text-decoration: none;

line-height: 60px;

margin-left: 50px;

margin-right: 50px;

color: #020C16;

font-weight: bold;

}

head a:hover{

color: greenyellow;

}

.dangqian {

color: #000000;

}

footer {

line-height: 60px;

font-size: 14px;

text-align: center;

background-color:pink;

}

nav {

background-color: #red;

width: 1000px;

height: 60px;

}

nav a {

text-decoration: none;

line-height: 60px;

margin-left: 50px;

margin-right: 50px;

color: #020C16;

font-weight: bold;

}

nav a:hover {

color: #1a9be6;

}

.dangqian {

color: #1a9be6;

}

</style>

</head>

<body>

<nav>

<a class="dangqian"href="me.html">我的主页</a>

<a class="dangqian" href="ms.html">热爱美食</a>

<a class="dangqian"href="jx.html ">我的家乡</a>

<a class="dangqian"href="ly.html">留言吧</a>

</nav>

<hr align="center" width="100%" color="black">

<div id="head">

<nav>

<a class="dangqian" href="" target="_blank">http://www.weather.com.cn/weather1d/101271001.shtml#input">泸州天气</a>

<a class="dangqian" href="" target="_blank">https://baike.baidu.com/item/%E6%B3%B8%E5%B7%9E/466521">泸州历史</a>

<a class="dangqian" href="" target="_blank">https://m.maigoo.com/top/405482.html">泸州特产</a>

</nav>

</div>

<div>

<img src="lz4.jfif">

</div>

<hr style="height:1px;border:none;border-top:1px dashed goldenrod;">

<div id="center">

<p>

<img src="lz4.jfif" width="20px"

height="20px">

泸州，古称“江阳”，别称酒城、江城，四川省辖地级市，全国区域中心城市 ，川渝滇黔结合部区域中心城市和成渝地区双城经济圈南翼中心城市 、重要的商贸物流中心，长江上游重要的港口城市。截止2020年12月底，全市乡镇政区126个，面积12232.34平方千米。 2021年全市常住人口425.9万。

</p>

<p>

<img src="lz2.jfif" width="20px"

height="20px">

泸州市，位于四川省东南，东与重庆市和贵州省接壤，南与贵州省连界，西与云南省和四川省宜宾市、自贡市相连，北接四川省内江市和重庆市。 全市位于四川盆地南缘，永宁河、赤水河，沱江与长江交汇处。地理座标介于北纬27°39′-29°20′，东经105°8′-106°28′。南北长184.84千米，东西宽121.64千米；东到重庆221千米，北到成都268千米。全市辖区面积12232.34平方千米

</p>

<p>

<img src="lz1.jfif" width="20px"

height="20px">

泸州是国家历史文化名城，具有两千多年历史文化；西汉设江阳侯国；梁武帝大同年间建置泸州；泸州在宋代即为西南要会，明代即与成都、重庆三足鼎立，成为当时全国33个商业大都会之一。 形成了以名酒文化、生态文化、红色文化、历史文化、长江文化为代表的五大特色旅游资源；拥有国家4A级旅游景区14个，国家3A级旅游景区8个，国家2A级旅游景区10个。 泸州是四川培育壮大的七大区域中心城市之一、是长江中上游地区第二大集装箱码头，四川第三大航空港 ；也是第三批国家新型城镇化综合试点地区、跨境电子商务综合试验区；世界级白酒产业基地，国家重要的以名优酒为主体的食品工业基地、循环型化工基地、清洁能源生产基地、国家高性能液压件高新技术产业化基地、国家9大工程机械生产基地之一。泸州先后获得过联合国改善人居环境最佳范例奖（迪拜奖）、中国地级市民生发展100强、国家卫生城市 、中国优秀旅游城市、国家森林城市、国家园林城市、全国文明城市、国家水生态文明城市等荣誉。

</p>

<p>

<img src="lz.jfif" width="20px"

height="20px">

著名景点泸州老窖旅游区、张坝桂圆林、黄荆老林、福宝国家森林公园、画稿溪、太平古镇、方山风景区、古郎洞风景区、清溪谷花田酒地

</p>

</div>

<hr style="height:1px;border:none;border-top:1px dashed goldenrod;">

<hr style="height:1px;border:none;border-top:1px dashed

goldenrod;" />

<div>

<footer>

<p>

这是我的家乡

</p >

</footer>

</div>

</body>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style type="text/css">

body{

background-image: url(bg.jpg);

background-repeat: no-repeat;

background-size: 1500px;

}

</style>

</head>

<body>

<h2 align="center">给我留言吧</h2>

<hr align="center" width="70%" color="pink">

<div>

<form action="receive.php" method="get" target="_blank" enctype="x-www-form-urlencoded">

<table width="500px" align="center" bgcolor="pink" border="1" cellpadding="0">

<tr>

<td align="right">姓名：</td>

<td><input type="text" name="username" size="20" maxlength="10" placeholder="请输入姓名"/></td>

</tr>

<tr>

<td align="right">性别：</td>

<td>男<input type="radio" name="gender" value="male" />

女<input type="radio" name="gender" value="female" checked/>

</td>

</tr>

<tr>

<td align="right">我想对你说：</td>

<td>

<textarea name="intro" placeholder="请说出你对我的思念" cols="30" rows="3"></textarea>

</td>

</tr>

<tr>

<td colspan="2" align="center"><input type="submit" name="submit" value="提交">

<input type="reset" name="reset" value="重置">

</td>

</tr>

<tr >

<td colspan="2" align="center">

<a href="me.html"> <input type="text" name="submit" value="返回首页">

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

好啦，就是这样，希望能帮助到您

少女怎么不可以
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Html+CSS网页设计
我佛很悲
03-22 1174
Html CSS网页设计 样例+注释笔记
HTML网站设计
Cocksuck的博客
05-23 2618
目录 网站设计 网站开发的步骤 开发之前的准备 静态页面设计工具 需要的浏览器 服务器应用程序开发环境 数据库开发环境 网页开发的模块 浏览器价值 HTML HTML5的基本结构 标签(标记) 标签的分类 标签的属性 标签的书写要求 标签的书写规范 网页的生成 HTML中的常用基础标签 meta标签 标题标签h1-h6 p标签 字体格式化标签 hr标签 转义字符 img标签 a标签 pre标签 marquee标签 div标签 span标签 .
element不占位置的html标签,element.style.top 在变为什么 对应元素位置可以不变？
weixin_36250200的博客
05-30 359
html>Document*{margin: 0;padding: 0;}body{/*height: 1000px;*//*position: relative;*//*margin:0px;padding:0px;*/}.point {position: absolute;border: 5px solid red;}.ball{width:4px;height:4px;/*backgr...
小白也能上手的交互小程序教程：Big Box
weixin_43263566的博客
06-04 374
小白也能上手的交互小程序教程：Big Box
[HTML/JS]用HTML、JS实现放大图片效果（放大镜）
GS119115的博客
01-12 2496
购物软件普遍自带的商品放大镜可以让卖家浏览商品细节，想要自己实现如下。
html网页设计大作业
01-04
HTML网页设计是构建互联网内容的基础，它是一种标记语言，用于定义网页的结构和内容。在这个“html网页设计大作业”中，我们关注的重点是植物相关的主题，这表明学习者可能在创建一个关于植物的网站，旨在展示信息或...
网页设计作业书签html
12-20
网页设计作业书签html网页设计作业书签html网页设计作业书签html网页设计作业书签html网页设计作业书签html网页设计作业书签html网页设计作业书签html网页设计作业书签html网页设计作业书签html网页设计作业书签html...
HTML5网页设计小作业
10-16
1. 简洁的网页设计：使用简洁的设计风格，突出内容的重要性。 2. 响应式布局：适合PC和移动设备浏览器，提供良好的用户体验。 3. 完整的网页设计：包含了网页的所有要素，包括头部、导航栏、banner、内容区、底部等...
网页设计期末作业，使用HTML、CSS、Jquery模仿网易云网页
06-14
网页设计是IT领域中一个重要的组成部分，特别是在当前互联网时代，美观且用户体验良好的网页设计对于吸引用户至关重要。这个期末作业的主题是“使用HTML、CSS、Jquery模仿网易云网页”，这是一次实践性的学习任务，...
html＋css＋js网页设计
01-02
在“html＋css＋js网页设计”这一主题中，我们主要探讨的是如何使用HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript这三种核心技术来构建和设计具有交互性的网页。这些技术是现代网页开发的基础，对于任何想...
只用一个 HTML 元素可以写出多少形状？——不规则图形篇
Conan9912345的博客
08-23 656
您有没有想过一个问题，如果我们只用一个 div 元素，一共可以写出多少种形状呢？
html转vue项目
qq_38880880的博客
08-19 381
总结来说，将HTML代码转换为Vue需要引入Vue框架并编写Vue组件，使用Vue的数据绑定和事件绑定语法实现页面的动态更新。当我们点击"Change Name"按钮时，changeName方法会被调用，将name属性的值改为"Vue.js"。在Vue的data选项中，我们定义了一个name属性，并将其初始值设为"Vue"。除了简单的数据绑定和事件绑定外，Vue还提供了丰富的指令和组件库，用于构建更复杂的用户界面。通过使用这些特性，我们可以将HTML代码转换为更加动态和交互的Vue应用。
HTML 基本语法特性与 title 标签介绍
前端基地
08-20 615
本文详细阐述了 HTML 的基本语法特性，涵盖对换行和缩进不敏感（无论标签是否换行及缩进，都不影响页面结构，并通过实例加以说明）、存在空白折叠现象（文字间的空格、换行和缩进会被折叠为一个空格显示，同样有示例展示）以及标签必须严格封闭（以避免错误，如不封闭 title 标签可能导致意外结果，也给出了示例）。此外，还对 title 标签进行了介绍。通过丰富的举例说明，助力读者进一步熟悉 HTML 的这些特性。
vue项目开发记录1：为v-html内的img元素添加点击放大效果
qq_41057206的博客
08-20 279
内容
响应式Web设计:纯HTML和CSS的实现技巧
m0_66995023的博客
08-20 730
使用百分比单位 (%) 或者相对单位 (em, rem) 定义宽度和高度，使元素能够根据容器大小自动调整。使用相对单位 (em 或 rem) 来设置字体大小，以便它们可以根据父元素或根元素的字体大小自动缩放。通过调整字体大小、颜色和间距来创建清晰的视觉层次，帮助用户更容易地导航和理解页面内容。从最基本的功能开始构建网站，然后逐渐添加更复杂的功能，确保所有用户都能访问基本内容。（1）使用不同的设备和浏览器进行测试，确保网站在各种环境下都能良好工作。（2）利用浏览器的开发者工具来模拟不同的屏幕尺寸和设备。
什么是html,dictype的作用是什么
2402_84987408的博客
08-19 829
HTML文件是一种文本文件，通过在文件中添加标记符来告诉浏览器如何显示其中的内容，如文字的处理方式、画面的安排、图片的显示等。3）在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作，DOCTYPE不存在 或格式不正确会导致文档以混杂模式呈现。HTML语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。浏览器内核是浏览器最重要的或者说是最核心的部分。严格模式与混杂模式如何区分？
wxml与标准的html的异同？
最新发布
weixin_56187723的博客
08-23 236
WXML（WeiXin Markup Language）与标准的HTML（HyperText Markup Language）在构建前端界面时，既有相似之处，也存在显著的差异。
Java学习Day31：HTML 第一章：观音禅院
weixin_51721783的博客
08-20 2627
单词> ：元素标签 ：首先中至少有两个单词，那第一个肯定是元素标签，元素标签后跟的都是属性标签。
前端开发中的大屏布局方案：使用 rem 单位与动态设置 html 的 font-size
前端开发工程师
08-19 2333
在前端开发中，实现响应式布局是非常重要的，尤其是在大屏幕设备上。本文将介绍一种使用 rem 单位和动态设置 html 元素的 font-size 的方法，来实现大屏布局的解决方案。
HTML网页设计：多媒体融入教程
网页与多媒体-html网页设计教程是一门实用的课程，主要讲解如何在网页中添加丰富的多媒体元素，使网站内容更具吸引力和互动性。HTML（超文本标记语言）作为基础，是网页设计的核心，它定义了网页的结构和内容呈现...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值