html+CSS部分基础运用2

最新推荐文章于 2024-07-19 15:50:46 发布
最新推荐文章于 2024-07-19 15:50:46 发布
阅读量720 收藏 15
点赞数 24
分类专栏： 前端3剑客运用（html+css+js） 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55709044/article/details/138713503
版权

.项目1  Hoverbox图像画廊

1.P102综合案例7.4。参考课本代码完成。

图5-1 图像画廊

项目二 web前端开发工程师工作内容

完成P107.实验7第二题。

图5-2 前端开发工程师工作内容

项目1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hoverbox</title>

    <link type="text/css" rel="stylesheet" href="hoverbox.css">

</head>

<body>

<div id="" class="">

    <h1>鼠标经过图片显示大图（Hoverbox Image Gallery)</h1>

    <ul class="hoverbox">

        <li>

            <a href="#">

                <img src="img/photo01.jpg" alt="description" class="preview">

                <img src="img/photo01.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo02.jpg" alt="description" class="preview">

                <img src="img/photo02.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo03.jpg" alt="description" class="preview">

                <img src="img/photo03.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo04.jpg" alt="description" class="preview">

                <img src="img/photo04.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo05.jpg" alt="description" class="preview">

                <img src="img/photo05.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo06.jpg" alt="description" class="preview">

                <img src="img/photo06.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo07.jpg" alt="description" class="preview">

                <img src="img/photo07.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo08.jpg" alt="description" class="preview">

                <img src="img/photo08.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo09.jpg" alt="description" class="preview">

                <img src="img/photo09.jpg" alt="description">

            </a>

        </li>

        <li>

            <a href="#">

                <img src="img/photo10.jpg" alt="description" class="preview">

                <img src="img/photo10.jpg" alt="description">

            </a>

        </li>

    </ul>

</div>

</body>

</html>

项目2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Wed前端开发工程师工作内容</title>

    <link type="text/css">

    <style>

        .li1{

        font-size:24px;

        }

        .li2{

        background:#9999cc;

        letter-spacing: 1px;

        }

        .li3{

        font-size:18px;

        }

        .li4{

        font-family:LiSu;

        background:#c0c0c0;

        }

        .a{

        color:blue;

        font-family:楷体;

        }

    </style>

</head>

<body class="a">

<h1>Wed前端开发工程师工作内容</h1>

<h3>Wed 前端工程师在不同的公司，会有不同的职能，但称呼都是类似的。</h3>

<ul>

 <li class="li1"><font face="黑体" ><b><i>做网站设计、网页界面开发</i></b> </font></li>

    <li class="li2">做网页界面开发</li>

    <li class="li3"><font  color="red">做网页界面开、前台数据绑定和前台逻辑的处理</font></li>

    <li class="li4"><font color="#0000cc" >设计、开发、数据处理</font> </li>

</ul>

</body>

</html>

项目1

项目2

-Initiation
关注
  • 24
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
XML:CSS基础之七
天地会
03-28 530
 hoverbox.htmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">Hoverbox Image GalleryHoverbox Image Galleryhttp://www.cssrain.cn" target="
web前端--制作图像画廊，鼠标经过小图时显示大图
Hey3399的博客
10-22 2029
web前端开发，使用HTML文件制作图像画廊，用css文件规定样式，实现当鼠标经过小图时显示大图。
html+CSS部分基础运用4
m0_55709044的博客
05-14 862
也是世界上使用较广泛的语言，英语包含约49万词，外加技术名词约30万个，是词汇最多的语言，也是欧盟以及许多国际组织以及英联邦国家的官方语言，拥有世界第三位的母语使用者人数，仅次于汉语和西班牙语母语使用者人数。英语也是与电脑联系最密切的语言，大多数编程语言都与英语有联系，而且随着网络的使用，英文的使用更普及。英语是联合国的工作语言之一。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。
html+css基础知识
weixin_52682120的博客
05-10 2101
0、前提 80%知识，只有20%的场景可以用到； 20%的知识，有80%的场景可以用到。 1 、HTML & CSS 到底是什么，有什么用？ 它们是两门语言。 HTML + CSS + Javascript = 网页 HTML：Hyper Text Markup Language 超文本标记语言；定义网页中有什么。 CSS：Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。 1.1 执行HTML CSS HTML、CSS -> 浏览器内核 -> 页面
零基础HTML+CSS到入门
weixin_51356295的博客
07-10 1839
付款方式支付宝微信银行卡
html+css+js基础问答
qq_43751465的博客
08-26 5102
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
web前端——HTML+CSS
m0_64378422的博客
02-10 3261
web前端——HTML+CSS
HTML+CSS大作业
而风不止
11-14 1744
HTML：结构CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
HTML+CSS学习总结
weixin_53351919的博客
06-26 2795
html+css学习总结
HTML5 + CSS3
坏蛋阿土的博客
10-29 8483
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏
前端三剑客（html+css+js）加vue部分基础运用2
06-11
在IT行业中，前端开发是构建Web应用程序的重要组成部分，而“前端三剑客”指的是HTML、CSS和JavaScript，这三种技术是构建任何现代网页的基础。Vue.js是近年来非常流行的一个前端框架，它使得JavaScript的开发更加...
HTML+Javascript+CSS测试题
06-08
2. CSS选择器和样式规则：测试对各种选择器的熟悉程度，以及如何设置和继承样式。 3. 布局与盒模型：考察浮动布局、定位（absolute/fixed/static/relative）以及Flexbox和Grid布局的理解。 4. JavaScript基础语法：...
黑马基础学习html+css课程笔记和案例
06-29
在“黑马基础学习html+css课程笔记和案例”中，你可以找到学习这两门语言的详细资源，包括理论知识和实践案例。 HTML是网页内容的结构标记语言，它定义了网页的基本元素，如标题、段落、链接、图片等。学习HTML首先...
css常用代码大全(html+css代码).pdf
07-13
这些只是CSS的一部分基础知识，实际应用中还有更复杂的布局技术，如响应式设计、Flexbox和Grid布局，以及更高级的动画和过渡效果。熟悉并熟练运用这些CSS代码，将能极大地提升网页设计的质量和效率。
基于HTML+CSS技术的期末网页作业
06-05
【HTML+CSS网页设计基础】 HTML（HyperText Markup Language）是网页内容的结构化语言，而CSS（Cascading Style Sheets）则负责控制这些内容的样式和布局。在这个基于HTML5+CSS的期末网页作业中，学生展示了对这两...
最新！CSSCI（2023-2024）期刊目录公布！
最新发布
2301_76900678的博客
07-19 132
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 527
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 1904
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

-Initiation

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值