前端学习（六）

最新推荐文章于 2024-08-11 22:22:51 发布
最新推荐文章于 2024-08-11 22:22:51 发布
阅读量288 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwertykln/article/details/51274316
版权

这里写图片描述

我的代码：

<!--task1_6_1.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task1_6_1</title>
    <link rel="stylesheet" href="D:\work\task1_6_1.css">
</head>
<body class="body ">
    <div class="page">
        <div class="head">
            <p class="title">ife.baidu.com</p>
            <p class="date">2016.03</p>
        </div>
        <div class="line1"></div>
        <div class="img">
            <img src="D:\work\image\6_1.png">
        </div>
        <div class="line2">
            <p class="text1">ABOUT</p>
            <p class="text2">TECHNOLOGE</p>
            <p class="text3">About technologe about technologe about technologe</p>
            <p class="text4">700</p>
            <p class="text5">3.2</p>
            <p class="text6">CSS</p>
            <p class="text7">csscsscsscsscsscss</p>
        </div>
        <div class="main">
            <div class="part1">
                <p class="what">What</p>
                <p class="font1">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
            </div>
            <div class="part2">
                <p class="when">When</p>
                <p class="font1">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
            </div>
            <div class="part3">
                <p class="how">How</p>
                <p class="font2">前端前端前端前端前<br/>前端前端前端前端前端前<br/>前端前端前端</p>
                <br/>
                <p class="font3">What--------<span>40%</span></p>
                <p class="font3">What--------<span>30%</span></p>
                <p class="font3">What--------<span>30%</span></p>
            </div>
        </div>
        <div class="title1">
            <div class="left">
                <p class="font4"><span>THE</span>&nbsp;TECHNOLOGE<br/>OF&nbsp;FRONT</p>
                <p class="font5">前端技术领域</p>
                <div class="line3"></div>
                <div class="content">
                    <p class="first"><span>前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前
                    <img class="img2" src="D:\work\image\3.png"/>
                    前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端</p>
                    <p class="p2">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
                    <p class="p2">前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
                </div>
            </div>
            <div class="right">
                <img class="img3" src="D:\work\image\2.png"/>
                <div class="title2">
                    <div class="title3">
                        <p class="text8"><span>前端技术</span>前端技术前端技术</p>
                    </div>
                </div>
                <div class="content2"> 
                    <ul class="con_box">
                        <li><span class="tri"></span>前端前端前端前端前端前端.......................<span class="toright">前端</span></li>  
                        <li><span class="tri"></span>前端前端......................................<span class="toright">前端前</span></li>
                        <li><span class="tri"></span>前端前端前端前端前端前端前端...................<span class="toright">前端</span></li>     
                    </ul>
                    <div class="red">
                        <span class="zero">0</span>
                        <div class="line4">
                            <p class="let">ONE&nbsp;TWO&nbsp;</p>
                            <p class="let">THREE&nbsp;FOUR&nbsp;FIVE</p>
                            <p class="word">hello&nbsp;world&nbsp;hello&nbsp;world</p>
                            <p class="word">hello&nbsp;world</p>
                        </div>
                    </div>
                    <div class="hello">
                        <p><span class="lquote">“</span>world&nbsp;hello&nbsp;world</p>
                        <p>hello&nbsp;world&nbsp;hello&nbsp;world</p>
                        <p>hello&nbsp;world&nbsp;hello&nbsp;world</p>
                        <p>hello&nbsp;world&nbsp;hello&nbsp;world&nbsp;</p>
                        <p>hello&nbsp;world&nbsp;hello&nbsp;world&nbsp;</p>
                        <p>hello&nbsp;world<span class="rquote">”</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="foot">
            <p>ife.bai.com</p>
        </div>
    </div>
</body>
</html>
//task1_6_1.css
.body{
    background-color: #ccc;
}
.page{
    width: 980px;
    height: 1386px;
    background-color: white;
    position: absolute;
    top:30px;
    left: 50%;
    margin-left: -490px;
}
.head{
    width: 110px;
    height: 61px;
    position: absolute;
    top:0px;
    left:44px;
    background-color: #dc143c;
}
.title{
    font-family: Simhei;
    font-size: 12px;
    position:absolute; 
    top:30px;
    right: 15px; 
    color: #ffffff
}
.date{
    font-family: Simhei;
    font-size: 12px;
    color:#cc0000;
    position: absolute;
    top:35px;
    left:850px;
}
.line1{
    width: 892px;
    border-top: 2px solid #938e8c;
    margin:0 auto;
    margin-top: 61px;
}
.img{
    width: 641px;
    height: 301px;
    margin: 30px 44px 30px 44px;
    float:left;
}
.line2{
    width: 203px;
    border-top: 2px solid #cc8091;
    margin:30px 44px 0px 0px;
    float: right
}
.text1{
    font-family: Microsoft Yahei;
    font-size: 24px;
    color: #000000;
    text-decoration: underline;
    margin:10px 0px 0px 0px; 
}
.text1:first-letter{
    font-size:28px;
}
.text2{
    font-family: Microsoft Yahei;
    font-size: 24px;
    color: #000000;
    text-decoration: underline;
    margin:0px; 
}
.text2:first-letter{
    font-size: 28px;
}
.text3{
    font-family: Simkai;
    font-size: 12px;
    color: #000000;
    margin: 0px 0px 10px 0px;
}
.text4{
    font-family: Microsoft Yahei;
    font-size: 116px;
    color: #75b86b;
    font-style: oblique;
    margin: -20px 0px 0px -20px;
}
.text5{
    font-family: Microsoft Yahei;
    font-size: 55px;
    color: #cc8091;
    margin: -10px;
    position: relative;
    top:-10px;
    left: 0px;
}
.text6{
    font-family: Microsoft Yahei;
    font-size: 21px;
    color: #cc8091;
    position:relative;
    top: -70px;
    left: 70px;
}
.text7{
    font-family: Microsoft Yahei;
    font-size: 12px;
    color: #cc8091;
    position: relative;
    top:-95px;
    left: 70px;
}
.main{
    width: 641px;
    margin: 364px 0px 0px 44px;
}
.part1{
    width: 216px;
    position: absolute;
    left: 44px;
}
.what{
    font-family: Microsoft Yahei;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    color: #418c59;
    margin: 0;
}
.font1{
    font-family: SimSun;
    font-size:12px;
    color: #767777;
    margin-top:16px;
    line-height: 1.5;
}
.part2{
    position: relative;
    width: 204px;
    margin: 0 200px 0 258px ;
}
.when{
    font-family: Microsoft Yahei;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    color: #d2994f;
    margin: 0;
}
.part3{
    width: 161px;
    position: absolute;
    left:540px;
    top:426px;
}
.how{
    font-family: Microsoft Yahei;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    color: #cc7680;
    margin: 0;
}
.font2{
    font-family: SimSun;
    font-size:12px;
    color: #767777;
    margin-top:16px;
    line-height: 1.5;
}
.font3{
    font-family: Microsoft Yahei;
    font-size:12px;
    color: #767777;
    margin:8px 0px;
}
.font3 span{
    color: #cd4a48;
    font-style: italic;
    opacity:0.7;
}
.title1{
    width: 892px;
    margin:0 auto;
}
.left{
    width: 415px;
    position: relative;
    top:40px;
}
.font4{
    font-family: Simhei;
    font-size: 42px;
    color:#11456b;
    font-weight: bold;
    margin:0;
    line-height: 1;
}
.font4 span{
    font-size: 72px;
    color: #f5e327;
    font-style: oblique;
}
.font5{
    font-family: Simhei;
    font-size: 33px;
    color:#11456b;
    font-weight: bold;
    margin-top:16px;
}
.line3{
    width: 415px;
    margin: -20px 0 0 0;
    border-top: 2px solid #11456b;
}
.content{
    width: 415px;
    font-family: SimSun;
    font-size: 12px;
    color: #767777;
    line-height: 16px;
    float: left;
    left: 44px;
}
.first{
    margin: 30px 0 0 0;
}
/*首字下沉*/
.first span{
    font-family: Microsoft Yahei;
    font-size: 70px;
    color: #f5e327;
    float: left;
    text-align: center;
    width: 70px;
    height: 70px;
    line-height: 70px;
}
.img2{
    width: 150px;
    height: 260px;
    float: right;
    margin: 5px 0px 5px 5px;
}
.p1{
    margin: 0;
}
.p2{
    text-indent: 2em;
    margin: 0;
}
.right{
    width: 485px;
    position: relative;
    left: 420px;
    top:-580px;
}
.img3{
    width: 458px;
    height: 275px;
    margin-left: 30px;
}
.content2{
    background-color: #f5f5dc;
    width: 459px;
    height: 318px;
    position: relative;
    top:-60px;
    left: 30px;
}
.title2{
    width: 458px;
    height: 61px;
    position: relative;
    background-color: black;
    opacity: 0.5;
    top:-75px;
    left: 30px;
}
.title3{
    width: 900px;
    height: 44px;
    position: relative;
    left: 40px;
    top:10px;
    border-left: 3px solid #72b16a;
}
.text8{
    font-family: Microsoft Yahei;
    font-size: 12px;
    font-style: oblique;
    color:#72b16a;
    letter-spacing: 140%;
}
.text8 span{
    font-size: 26px;
    font-style: normal;
    color: #ffffff;
    padding:10px;
}
.con_box{
    padding:20px;
    list-style: none;
}
.con_box li{
    width: 434px;;
    margin-bottom: 20px;
    font: 16px "宋体";
    color: #5a5b5b;
    float: left;
}
.tri{
    display: inline-block;
    margin: 0 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #10456b;
}
.toright{
    padding-top: 5px;
    float: right;
    font-size: 12px;
    font-style: oblique;
}
.red{
    width: 260px;
    height: 160px;
    position: absolute;
    background-color: #dc143c;
    top:160px;
}
.zero{
    font-family: Microsoft Yahei;
    font-size: 110px;
    color: #ffffff;
    margin: 0 auto;
    margin-left: 10px;
}
.line4{
    width: 150px;
    height: 86px;
    position: relative;
    left: 80px;
    top:-110px;
    border-left:2px solid #ffffff; 
}
.let{
    font-family: Simhei;
    font-size: 21px;
    font-style: oblique;
    color: #ffffff;
    margin:0 10px 10px 10px;
}
.word{
    font-family: Simhei;
    font-size: 12px;
    color: #ffffff;
    margin:0 10px 3px 10px;
}
.hello{
    position: relative;
    left:270px;
    top: 20px;
}
.hello p{
    font-family: Simhei;
    font-size: 14px;
    font-style: oblique;
    color: #5a5b5b;
    margin-top:8px;
    margin-bottom:8px;
}
.lquote{
    font-size: 72px;
    color: #d45d5c;
    float: left;
    margin-top: -10px;
    margin-left: -50px;
    margin-right: 15px;
    margin-bottom: -50px;
}
.rquote{
    font-size: 72px;
    color: #d45d5c;
    float: right;
    margin-top: -10px;
    margin-right:300px;
    margin-bottom: -50px;
}
.foot{
    width: 892px;
    margin: 0 auto;
    border-top: 1px solid #938e8c;
    position: relative;
    top:-610px;
}
.foot p{
    font-family: Simhei;
    font-size: 12px;
    color: #d45d5c;
    float: right;
    margin-top:0px;
}

问题：试图缩放网页截图，结果全乱了。。。。？？。。。

qwertykln
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
06day_前端学习资料_
09-30
这个压缩包包含了第六天的学习内容，可能是一个系统的前端学习计划的一部分，通过逐日递增的方式让学习者逐步深入。 在前端开发中，主要涉及到以下几个关键知识点： 1. HTML（HyperText Markup Language）：HTML ...
前端学习资源整理
12-14
这个名为"前端学习资源整理"的压缩包文件显然集合了多种前端技术的学习资料，旨在帮助初学者或有经验的开发者巩固和提升他们的技能。以下是对这些技术的详细介绍： 1. **JavaScript基础知识**：JavaScript是一种...
前端学习笔记-黑马程序员
01-09
前端学习笔记-黑马程序员 本篇文章主要介绍了 HTML 基础知识，涵盖了标签的基本概念、HTML 基本结构、文档类型声明、字符集、标签语义、标题标签、段落和换行标签、文本格式化标签、图像标签、路径、超链接标签、...
前端学习项目，学成在线
10-11
【前端学习项目，学成在线】是一个专门为前端开发者设计的学习资源集合，旨在帮助初学者或有一定基础的人深入理解和掌握前端开发技术。这个项目涵盖了前端开发的各个方面，通过一系列的实践项目，让学习者能够理论...
前端学习代码之-css3
04-12
本资源包“前端学习代码之-css3”旨在帮助初学者和进阶者通过实践来掌握CSS3的各种特性。 一、选择器的扩展 CSS3引入了许多新的选择器，如类选择器（.class）、ID选择器（#id）、伪类（:hover, :active, :focus）...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 419
ASP.NET Core Web API 使用Autofac框架
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 383
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
略记一次抓取内容后解密及登录的经历
深蓝浅蓝的天
08-09 966
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 682
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
a_靖的博客
08-07 280
vue实现放大缩小，拖动盒子完整代码付效果图
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 302
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
【Android】网络技术知识总结之WebView,HttpURLConnection,OKHttp,XML的pull解析方式
Patrick_yuxuan的博客
08-07 1019
网络技术知识总结—WebView,HttpURLConnection,OKHttp,XML的pull解析方式
【如何有效解决前端Vue中的常见难题】
最新发布
zhaochen1127的博客
08-11 486
面对Vue项目中的性能优化、兼容性和安全性等难题，开发者需结合项目实际情况，采取合适的解决方案。通过代码分割、状态管理、服务端渲染等技术优化性能；利用PostCSS、Polyfill等工具解决兼容性问题；通过严格的输入验证、HTTPS传输等措施保障应用安全。同时，良好的团队协作和持续的技术学习也是解决难题、提升项目质量的关键。希望本文能为Vue开发者提供一些实用的参考和启发。
前端工程化15-邂逅ES6的语法规范
沉睡的猫的博客
08-11 311
4、ES6邂逅 3.1、什么是ECMA ECMA（European Computer Manufacturers Association）中文名为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1 994年后该组织改名为Ecma国际。 3.2、什么是ECMAScript ECMAScript 是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。 3.3、什么是ECMA-262 Ecma国际制定了许多标准，而ECMA-262只是其中的一个，所有标准列表查看 http://w
智启万象 | Web 开发智能升级、简单易用
谷歌开发者
08-10 743
AI 的融入使 Web 的功能更加强大同时也更加简单易用一起回顾 2024 Google 开发者大会了解 Web 开发 UI 功能和 OS 集成的最新创新以及如何通过这些创新来打造卓越的应用体验Web 不断的革新与发展，不仅为全球数十亿用户提供了丰富多样的在线体验，也为开发者提供了实现创意和构建未来的可能。谷歌提供工具和解决方案，帮助 Web 开发者基于实际数据做出明智的技术选型和开发决策。Bas...
关于wsl2与win11互联互通的问题
m0_47670683的博客
08-11 155
···bash [wsl2][experimental] networkingMode=mirrored dnsTunneling=true firewall=true autoProxy=true ···在windows中查看自身的ip。 重点确认192.168开头的本机ip地址，其他的很多ip都不能用，例如Default Switch这给的ip是172.26.80.1、WSL (Hyper-V firewall)这给的ip是172.30.128.1，都不用管。记录下本机ip：我的是192.168.124
vue中怎么自定义组件
qinshi501的博客
08-09 1207
在开发过程中我们经常需要自定义组件完成特定的功能，比如用户详情页，我增加一个调整余额的按钮，点击以后需要打开一个调整余额对话框，输入调整的金额大小，完成以后关闭弹框同时刷新页面，要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件，包含一个调整按钮，点击按钮就打开这个对话框，里面利用watch监听用户的余额和用户id等信息，同时使用watch回调实时更新余额信息等。这里的refresh后的方法组件刷新的方法，可以在调整完余额后刷新用户最新余额信息。: number // 变动类型：1-用户金额。
VUE学习-day20
W_ZH511的博客
08-07 740
Node.js是一个免费、开源、跨平台的 JavaScript 运行时环境，它让开发人员能够创建服务器、Web 应用、命令行工具和脚本。我们可以通过node.js来下载vue的组件和创建vue项目下载安装教程:https://blog.csdn.net/2301_78542842/article/details/138344124。
基于Martin实现MapboxGL自定义底图
LZUGIS
08-10 906
本文分享基于Martin实现MapboxGL底图的自定义。
c# 使用异步函数实现线程的功能
MaggieWon
08-07 271
c#程序执行时 想要拖动窗口 需要使用线程,但是使用线程 对操作前端窗体很不友好.所以写了一个异步函数,网上搜了一下,貌似异步函数比线程 更加友好,更加现代。做这个功能的原因是 主要是想等程序执行完 走一个提示.用线程很难做到。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值