网页设计练习

已于 2023-12-21 22:56:14 修改
阅读量52 收藏
点赞数
文章标签： html
于 2023-11-18 22:31:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1833919188/article/details/134485044
版权

11.18日练习 表格样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格样式</title>
    <style type="text/css">
        table,th,td{border: 10px solid silver;}
        table{caption-side: bottom;}
        #t1{border-collapse: collapse;}
        #t2{border-spacing: 8px;}
    </style>
</head>
<body>
    <table id="t1">
        <caption>表格标题</caption>
        <!--表头-->
        <thead></thead>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
        <tr>
            <td>表行单元格5</td>
            <td>表行单元格6</td>
        </tr>
    </table>
    
    <table id="t2">
        <caption>表格标题</caption>
        <!--表头-->
        <thead></thead>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
        <tr>
            <td>表行单元格5</td>
            <td>表行单元格6</td>
        </tr>
    </table>


</body>
</html>

11.19日练习  图片样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片样式</title>
    <style type="text/css">
       img{width: 60px;height:60px;}
        div
        {
            width: 300px;
            height:80px;/*长宽*/
            border:1px solid silver;/*边框*/
        }
        .div1{text-align: left;}
        .div2{text-align: center;}
        .div3{text-align: right;}
        #img1{vertical-align:top;}
        #img2{vertical-align:middle;}
        #img3{vertical-align:bottom;}
        #img4{vertical-align:baseline;}   
    </style>
  
</head>
<body>
        <!--水平对齐-->
    <div class="div1">
        <img src="C:\Users\123456\Desktop\d.png.jpg" alt="图片"/>
    </div>  
    <div class="div2">
        <img src="C:\Users\123456\Desktop\g.png.jpg" alt="图片"/>
    </div>
    <div class="div3">
        <img src="C:\Users\123456\Desktop\b.png.jpg" alt="图片"/>
    </div>
    
    <!--垂直对齐-->
    绿叶学习网<img id="img1" src="C:\Users\123456\Desktop\e.png.jpg" alt=""/>绿叶学习网（top）
    <hr>
    绿叶学习网<img id="img2" src="C:\Users\123456\Desktop\d.png.jpg" alt=""/>绿叶学习网（middle）
    <hr>
    绿叶学习网<img id="img3" src="C:\Users\123456\Desktop\g.png.jpg" alt=""/>绿叶学习网（bottom）
    <hr>
    绿叶学习网<img id="img4" src="C:\Users\123456\Desktop\b.png.jpg" alt=""/>绿叶学习网（baseline）
    <hr>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字环绕</title>
    <style type="text/css">
        img
        {
            
            float:left;
            
        }
        p
        {
            font-family: "微软雅黑";
            font-size: 12px;
        }
        div
        {
            width: 400px;
            height:150px;/*长宽*/
            border:1px solid silver;/*边框*/
        }
    </style>
</head>
<body>
    <div>
        <img  src="C:\Users\123456\Desktop\e.png.jpg" alt="梯田" width="30% height=30%"/>
        <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊；自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。
            予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻，莲之爱，同予者何人？牡丹之爱，宜乎众矣。
        </p>
    </div>
</body>
</html>

超链接样式 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        a{text-decoration: none;}
        a:link{color: red;}/*定义a元素未访问时的样式*/
        a:visited{color: purple;}/*定义a元素访问过的样式*/
        a:hover{color:yellow;}/*定义鼠标经过a元素时的样式*/
        a:active{color:blue;}/*定义鼠标单击激活时的样式*/
    </style>
</head>
<body>
    <a href="http://www.lvyestudy.com/" target="_blank">绿叶学习网</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        a
        {
            color: red;
            text-decoration: none;
        }
        a:hover
        {
            color: blue;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>
    <a href="http://www.lvyestudy.com/" target="_blank">绿叶学习网</a>    
    </div>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div
        {
            width:100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: white;
            background-color: lightskyblue;
        }
        div:hover
        {
            background-color: pink;
        }
        img:hover
        {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <div>
        绿叶学习网
    </div>
    <img src="D:\网页设计\on.gif">
    
</body>
</html>

a1833919188
关注
HTML5网页设计练习-平台推荐
m0_66168318的博客
03-25 987
免费学习编程 - Python、JavaScript、Java、Git 等freeCodeCamp 是一个免费学习编程的开发者社区，涵盖 Python、HTML、CSS、React、Vue、BootStrap、JSON 教程等，还有活跃的技术论坛和丰富的社区活动，在你学习编程和找工作时为你提供建议和帮助。https://chinese.freecodecamp.org/ 具体步骤如下： 响应式网页设计：电脑浏览呈现电脑版，手机浏览呈现手机版。根据浏览的客户端不同，相应不同的界面。...
HTML5网页设计练习题
m0_66168318的博客
04-15 584
网页设计练习-JavaScript的学习
2302_80868896的博客
12-19 1951
JavaScript
百度网页设计练习
csdnxiaotao的博客
03-31 704
静态网页设计课后练习
qq_55793988的博客
09-27 921
静态网页设计课后练习
网页设计练习--HTML篇
2301_79602950的博客
12-22 599
【代码】网页设计练习--HTML篇。
网页设计练习--bootstrap篇（第四次课后练习）
2301_79602950的博客
12-22 472
【代码】网页设计练习--bootstrap篇（第四次课后练习）
HTML5网页设计练习-选择器的应用
m0_66168318的博客
03-26 697
HTML5网页设计练习-新闻页面
m0_66168318的博客
03-17 1043
...
基于PHP的网页设计练习作业源码
09-23
该项目是基于PHP的网页设计练习作业源码，包含174个文件，包括64个PHP源文件、37个HTML页面文件、15个构建路径文件、15个项目配置文件、9个JPG图片文件、5个JPEG图片文件、4个PNG图片文件、4个CSS样式文件和2个SQL...
网页设计练习案例.zip
12-17
本压缩包"网页设计练习案例.zip"提供了若干实例，帮助学习者深入理解网页设计的核心概念和技术。下面我们将详细探讨这些案例可能涵盖的知识点。 1. **页面布局**：布局是网页设计的基础，它决定了信息的组织方式。...
shop _网商网页设计练习_后端设计_worker7t6_gulfuhs_前端_
10-03
在"shop _网商网页设计练习_后端设计_worker7t6_gulfuhs_前端_"这个主题中，我们可以深入探讨一系列与网页设计、后端开发以及前后端交互相关的知识点。这显然是一份针对初学者的实践教程，旨在帮助他们掌握JSP（Java...
网页设计练习及答案.doc
12-23
网页设计练习及答案 本资源摘要信息涵盖了网页设计的基本概念、HTML语言的基础知识、网页设计的基本元素、浏览器软件、网页三剑客、标题设置、表格对齐、列表项目符号、文字样式、超链接等多方面的知识点。 一、...
HTML 与 ES6 是前端开发的两大核心技术
qq_25416827的博客
10-02 1008
HTML：主要负责页面的结构、语义化、布局和多媒体处理。ES6：提高了 JavaScript 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革。
html中src/href区别
hexadecimal_001的博客
10-05 538
在HTML中，src和href是两个常见的属性，它们用于指定资源的位置，但用途和上下文有所不同。
html 之 relative 和 absolute
最新发布
u010194271的博客
10-09 255
结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。
XHTML 简介
wjs2024的博客
10-04 544
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
脚本语言与互动网页设计练习题解析
"脚本语言和互动网页设计练习题C.pdf" 这篇内容主要涵盖了脚本语言和互动网页设计的基础知识，包括HTML元素、属性、JavaScript对象以及JDBC和JSP的相关概念。以下是各知识点的详细说明： 1. `<title>` 标记符通常...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值