静态页面学习笔记

最新推荐文章于 2024-09-09 22:16:15 发布
最新推荐文章于 2024-09-09 22:16:15 发布
阅读量141 收藏
点赞数
文章标签： HTML CSS布局 JavaScript交互 网页设计 网页美化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49596018/article/details/110354346
版权

一、效果图
在这里插入图片描述
二、HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start-up</title>
</head>
<style>
    header {
        background-position: -42px 0px;
        background-image: url("./images/header-bg.jpg");
        align-items: center;
        box-sizing: border-box;
        background-repeat: no-repeat;
    }
</style>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="navFirst"></div>
        <div class="topTitle"></div>
        <div class="topTitle"></div>
        <div class="topTitle"></div>
        <div class="topTitle"></div>
        <div class="topTitle"></div>
    </header>
    <!-- 思考大图 -->
    <section class="thinking">
        <span class="write">Here We</span>
        <span class="write write2"> Are!</span>
        <p class="thinkWord"></p>
        <!-- 黄色五角星，白色五角星 -->
        <p>
            <span class="fivePointerStart"></span>
            <span class="fivePointerStart"></span>
            <span class="fivePointerStart"></span>
        </p>
    </section>
    <!-- who were are 区域 -->
    <section class="whoWeAre">
        <!-- 左侧 -->
        <figure>
            <img src="" alt="" class="messagePic">
            <figcaption></figcaption>
        </figure>
        <!-- 右侧 -->
        <figure>
            <img src="" alt="" class="messagePic">
            <figcaption></figcaption>
        </figure>
    </section>
    <!-- 欢迎光临区域 -->
    <SECtion class="welcome"></SECtion>
    <!-- 脚部区域 -->
    <footer>
        <section class="footerSec">
            <p style="font-style:italic;font-size: 28px; margin-top: 40px; margin-bottom: 20px;"> our Ideas</p>
            <div style="display: flex; justify-content: space-between; box-sizing: border-box;">
                <img src="./images/page1-img3.jpg" alt="" class="needBorder">
                <img src="./images/page1-img4.jpg" alt="" class="needBorder">
                <img src="./images/page1-img5.jpg" alt="" class="needBorder">
            </div>
            <div style="display: flex;justify-content: space-between;">
                <span style="font-size: 18px; color: #fb9051; margin-top: 25px;">Nam liber tempor</span>
                <span style="font-size: 18px; color: #fb9051; margin-top: 25px;"> Cum Solute nobis</span>
                <span style="font-size: 18px; color: #fb9051; margin-top: 25px;"> Eleifend optiongue</span>
            </div>
            <div style="display: flex;justify-content: space-evenly;">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit </p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit </p>
            </div>
            <div style="display: flex; align-items: center; font-size: 20px;">
                <img src="./images/button.png" alt="">
                <span  style="cursor: pointer;">Read More</span>
            </div>
        </section>
        <!-- 右侧区域设置 -->
        <section class="footerSec" style="margin-left: 50px;">
            <p style="font-size: 24px;">Latest Events</p>
            <p style="display: flex;align-items: center; position: relative; ">
                <img src="./images/date.png" alt=""><span style="position: absolute; left:18px; top:20px;">29</span>
                <span style="font-size: 18px;">May,2012</span>
            </p>
            <p style="font-size: 10px; color: #fb9051;">Lorem ipsum dolor sit amet consect.</p>
            <p style="font-size: 10px;">Lorem ipsum dolor sit amet consect.</p>
            <p style="font-size: 10px; ">Lorem ipsum dolor sit amet consect.</p>
            <p style="display: flex;align-items: center; position: relative; ">
                <img src="./images/date.png" alt=""><span style="position: absolute; left: 18px; top:20px">21</span>
                <span style="font-size: 18px;">May,2012</span>
            </p>
            <p style="font-size: 10px; color: #fb9051;">Lorem ipsum dolor sit amet consect.</p>
            <p style="font-size: 10px;">Lorem ipsum dolor sit amet consect.</p>
            <p style="font-size: 10px; ">Lorem ipsum dolor sit amet consect.</p>
            <div style="display: flex; align-items: center; font-size: 20px;">
                <img src="./images/button.png" alt="">
                <span  style="cursor: pointer;">Read More</span>
            </div>
        </section>
        
    </footer>

    <script src="./index.js"></script>
</body>

</html>

三、js代码

let headerEle = document.getElementsByTagName("header")[0];

//设置头部样式
Object.assign(headerEle.style, {
    width: 1200 + "px",
    height: 90 + "px",
    margin: "0 auto",
    backgroundImage: `url("./images/header-bg.jpg")`,
    backgroundSize: "100% 100%",
    display: "flex",
    alignItems: "center",
    boxSizing: "border-box",
    paddingLeft: "165px"
})

//  头部左侧图标设置
let navFirst = document.getElementsByClassName("navFirst")[0];
Object.assign(navFirst.style, {
    width: 187 + "px",
    height: 56 + "px",
    backgroundImage: `url("./images/logo.png")`,
    backgroundSize: "100% 100%",
    display: "flxe"
});
//  2 3 4 5 6 文字添加。
let topTitle = [...document.getElementsByClassName("topTitle")];
topTitle.map(item => Object.assign(item.style, {
    fontSize: "20px",
    marginRight: "45px",
    color: "#e3e3e3",
   fontStyle :"italic"
}));
topTitle[0].innerHTML = "Home";
topTitle[0].style.marginLeft = "200px";
topTitle[0].style.color = "#cf7a0d"
topTitle[1].innerHTML = "About";
topTitle[2].innerHTML = "Services";
topTitle[3].innerHTML = "Products";
topTitle[4].innerHTML = "Contacts";

// 思考大图及其文字添加。——思考区域设置相对绝对定位进行操作
// 496px
let thinking = document.getElementsByClassName("thinking")[0];
Object.assign(thinking.style, {
    width: 1200 + "px",
    height: 496 + "px",
    margin: "0 auto",
    backgroundImage: `url("./images/slider-1.jpg")`,
    backgroundRepeat: "no-repeat",
    position: "relative"
});

let write = [...document.getElementsByClassName("write")];
write[0].style.position = "absolute";
write[0].style.top = "100px";
write[0].style.fontSize = "42px";
write[0].style.right = "190px";
write[0].style.fontStyle = "italic";

write[1].style.position = "absolute";
write[1].style.top = "142px";
write[1].style.fontSize = "42px";
write[1].style.right = "270px";
write[1].style.fontStyle = "italic";

let thinkWord = document.getElementsByClassName("thinkWord")[0];
Object.assign(thinkWord.style, {
    width: 280 + "px",
    height: "auto",
    position: "absolute",
    top: "220px",
    left: "750px"
});
thinkWord.innerHTML = "Duis autem vel eum iriure dolor in hendreit in vulputate velit esse molestie consequat";
thinkWord.style.lineHeight = "40px";
thinkWord.style.fontSize = "18px";
thinkWord.style.fontStyle = "italic";
// 五角星
let fivePointerStart = [...document.getElementsByClassName("fivePointerStart")];
// 通用样式样式设置
fivePointerStart.map(item => Object.assign(item.style, {
    position: "absolute",
    display: "inline-block",
    width: "34px",
    height: "34px",
    top: "375px",
    left: "800px",
    backgroundImage: `url("./images/pagination.png")`
}));
fivePointerStart[0].style.backgroundPosition=`-45px 0px`;
fivePointerStart[1].style.left=`845px`;
fivePointerStart[2].style.left=`890px`;
fivePointerStart[2].style.backgroundPosition=`-45px 0px`;

// whoWeAre区域设置
let whoWeAre=document.getElementsByClassName("whoWeAre")[0];

Object.assign(whoWeAre.style,{
    width:"1200px",
    boxSizing:"border-box",
    paddingLeft:"160px",
    paddingRight:"160px",
    backgroundColor:"#f6f6f6",
    height:"210px",
    margin:"0 auto",
    borderBottom:"1px dashed black",
    boxSizing:"border-box",
    display:"flex"
});



// 获取figure区域
let figureEle=[...document.getElementsByTagName("figure")];
figureEle.map(item=>item.style.width="480px");
figureEle.map(item=>item.style.height="210px");
figureEle.map(item=>item.style.display="flex");
figureEle.map(item=>item.style.margin="0");
figureEle.map(item=>item.style.padding="0");
figureEle.map(item=>item.style.marginTop="50px");
// 文字相关描述
let figcaptionEle=[...document.getElementsByTagName("figcaption")];
figcaptionEle.map(item=>item.style.margin="0px")
figcaptionEle[0].innerHTML=`
<p style="font-size:24px; font-style:italic;">Who We are</p>
<P  style="font-size: 12px; line-height:20px; font-style:italic">Start-Up is one of <i  style="color:#ff9000">free website</i> templates created by
TemplateMonster.com team.its optimized for 1280*1024 screen resolution
</P>
`
// 图片
let figurePicture=[...document.getElementsByClassName("messagePic")];
figurePicture[0].setAttribute("src","./images/page1-img1.png");
figurePicture[0].style.width="140px";
figurePicture[0].style.height="136px";

// 右侧设置
figcaptionEle[1].innerHTML=`
<p style="font-size:24px; font-style:italic;">Starting Up...</p>
<P  style="font-size: 12px; line-height:20px; font-style:italic">Start-Up is one of <i  style="color:#ff9000">free website</i> templates created by
TemplateMonster.com team.its optimized for 1280*1024 screen resolution
</P>
`
// 图片
figurePicture[1].setAttribute("src","./images/page1-img2.png");
figurePicture[1].style.width="140px";
figurePicture[1].style.height="136px";

// 欢迎区域设置
let welcomeEle=document.getElementsByClassName("welcome")[0];
Object.assign(welcomeEle.style,{
    width:"1200px",
    height:"138px",
    boxSizing:"border-box",
    paddingLeft:"160px",
    paddingRight:"160px",
    backgroundColor:"#f6f6f6",
    margin:"0 auto",
    borderBottom:"1px dashed black",
    paddingTop:"30px",
    paddingBottom:"40px"
});
// 文字内容添加
welcomeEle.innerHTML=`
<p style="font-size:36px; font-style:italic;  margin:0px ">Welcome TO Our <span  style="color:#ff9000">Start-UP</span>Website!</p>
<p style="font-size:22px; font-style:italic; margin:0px">Duis autem veleum iriure dolor in hendrerit in vulputate velit esse</p>
`;
// 脚部区域设置
let footerEle=document.getElementsByTagName("footer")[0];
footerEle.style.width="1200px";
footerEle.style.height="440px";
footerEle.style.margin="0 auto";
footerEle.style.backgroundColor="#f2f2f2";
footerEle.style.paddingLeft="160px";
footerEle.style.paddingRight="160px";
footerEle.style.boxSizing="border-box";
footerEle.style.display="flex";
// 脚部区域sect获取
let footerSec=[...document.getElementsByClassName("footerSec")];

footerSec[0].style.width="594px";
footerSec[0].style.height="100%";
let needBorder=[...document.getElementsByClassName("needBorder")];
needBorder.map(item=>item.style.border="10px solid white");
weixin_49596018
关注
静态网页制作HTML学习笔记
wg131452的博客
02-24 2455
一.HTML简介 1.HTML是什么？ HTML:Hyper Text Markup Language超文本标记（标签）语言由多种标签组成，用来制作网页，告浏览器该如何显示页面 2.THML语言的作用？ 制作网页，控制网页和内容的显示 插入图片.音乐.视频.动画等多媒体 通过链接检索信息 使用表单获取用户信息，实现交互 3.版本 W3C：World wide web consortium万维网联...
网站静态页面克隆 | 学习笔记
weixin_37629807的博客
06-20 1124
网站静态页面克隆 ；win10批量下载文件； win10批量新增目录、文件夹
静态页面笔记包括 html和css
qq_58982380的博客
02-14 552
HTML/CSS 笔记 一.html 简单介绍 html 意思是超文本标记语言 超文本：可以点击且跳转的文字或 图片 ； 标记语言：描述网页的一种语言 网页组成部分：结构 html 样式 css 行为 javascript xhtml:可扩展性的标记语言，xhtml和html的区别 (1) html语言，标签名可以大写，也可以小写，但是xhtml只能小写 (2) html单标签，结束可以不加/ xhtml语言必须要加 / (3) html属性值可以单引号也可以双引号，xhtml必须
我的学习日志（静态页面）
做技术，坚持才是最重要的，一时的热情只是暂时的进步
03-27 424
代码 <!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" /> <.
静态网页笔记01
Black_Me的博客
10-11 237
day01 1.html的简介 什么是html？ -HyperText Markup Language:超文本标记语言，网页语言 -超文本：超出文本的范畴，使用html可以轻松实现 -标记：html的所有操作都通过标记实现，标记就是标签 &lt;标签名称&gt; 第一个html程序 代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;test&lt;/ti...
搭建静态网页-day8-个人学习笔记
时光乱了谁的心的博客
09-24 638
搭建静态网页-day8-个人学习笔记 学完html+css，开始搭建京东静态网页，只做页面显示，涉及到js中的dom等，到学习js时再添加效果上去。刚开始想要搭建时，感觉内容好多，也无从下手，即便学html+css过程中每天都有使用新学到的知识做网页中的小模块。静下心后耐心的去分析网页的结构，发现网页可以按从上到下，从左到右，从外到里的顺序一小块一小块的完成。虽然里面嵌套的层...
php页面静态化学习笔记.doc
01-12
页面静态化是提升大型网站性能的关键技术之一，尤其在应对高流量和大量并发访问时显得尤为重要。PHP作为常用的服务器端脚本语言，其页面静态化技术可以帮助减轻服务器负担，提高用户体验，同时也对SEO（搜索引擎优化...
Scrapy 笔记2 ---- 静态网页（附完整代码）
Yif_Zhou
12-22 304
这次，我们抓取这个网站的所有文章内容。 大致思路： Loop 获得本页所有文章的链接，得到链接后进入链接页面，在新的页面中获取文章内容 获得下一页 url 神器 scrapy shell 使用方法上次已经说明，我们直接看效果 In [9]: response.xpath('//div[@class=&amp;amp;amp;quot;grid-8&amp;amp;amp;quot;]//div[@class=&amp;amp;amp;quot;post-meta&
1-3 静态网页开发笔记
weixin_48376132的博客
04-15 207
静态网页开发基础 网页开发流程：需求分析、整体规划、界面设计、前端程序设计、前后端系统整合、测试验收 版心 指网页中主要内容所在的区域。 常见版心值：960px/980px/1000px/1200px等 制作方法：使用标准流中的margin居中方法 页面布局流程 制作网页过程中，文件夹和内部文件的名字都不允许出现中文字符 确定页面的版心（可视区域） 分析页面中的行模块，以及每个行模块中的列模块 制作HTML页面，CSS文件 CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各
html学习笔记（一）简单静态网页
b150461的博客
07-15 1256
<html> <head> <title>第一个网页</title> </head> <body> <b>横看成岭侧成峰</b> <p><font color=red>远近高低各不同</font></p> <font size=6>不识庐山真...
前端学习记录之静态页面实现
10-16
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。——百度百科 给前端工程师的推荐。
静态static-笔记
莫逸雪的博客
12-28 175
1.类对象共享 2.类加载时产生，销毁时释放，生命周期长 静态成员的访问： 1.对象.成员 2.类名.成员 static放于属性名前称作静态属性、类属性 static放于方法名前称作静态方法、类方法 推荐调用方式：类名.静态成员 在成员方法中，可以直接访问类中的静态成员 静态方法中不能直接访问同一个类的非静态成员，只能直接调用同一个类的静态成员（包括方法和属性）只能通过对象实例化后，对象.成员方法...
前端学习笔记之4 静态页面练习(百度)
pangshishan1的博客
09-06 1885
引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端; 这篇文章只是作为我的笔记发在这里, 供自己业余时间看看; 全是很基础的东西, 看到的小伙伴 酌情略过 吧^_^效果图1. index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
笔记, 静态页面前后端渲染
weixin_34273479的博客
09-01 161
自己写 Demo 的时候用到的一个 trick, 觉得挺有意思的我的页面是用 JavaScript 搭配 React 生成的, 前面文章提过了那么就有两部分的 HTML, 一部分比如 <head>, 是 gulp 生成另一部分是 React 在浏览器当中生成的, 对应 <body> 的内容但是, 因为 React ...
京东静态页面笔记
holiday19950913的博客
03-02 2003
参考资料：https://www.bilibili.com/video/av21665439/?p=1 初始化： 不用通配符：加载慢 outline-style:没有外面的绿边框 textarea { resize:none; } //不可改变输入框 img { vertical-align:middle; } //去掉图片低侧默认的三像素 i,s,em //这些小标签没有语义化...
HTML 列表
qq_40107571的博客
09-06 409
HTML 列表
HTML 揭秘：HTML 编码快速入门
最新发布
m0_53117341的博客
09-09 1021
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML的块级元素与行内元素
m0_65178842的博客
09-06 553
块级元素通常会在新的一行开始，并且占据整个行的宽度。它们可以包含其他块级元素或行内元素。
HTML、CSS实现树状图
p_s_p的博客
09-09 444
【代码】HTML、CSS实现树状图。
PHP页面静态化学习及大流量技术应用指南
页面静态化是指将动态生成的网页内容转换为静态页面的一种技术。通过页面静态化，可以将原本需要服务器实时解析并生成的动态网页内容提前生成并保存为静态页面，用户在访问时直接获取静态页面，从而极大地提高网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值