静态网页设计——科学家网（HTML+CSS+JavaScript）(dw、sublime Text、webstorm、HBuilder X)

news2024/9/27 17:22:29

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：https://www.bilibili.com/video/BV1wg4y1Q7qm/?vd_source=5f425e0074a7f92921f53ab87712357b

源码：https://space.bilibili.com/565112134

使用技术：HTML+CSS+JS（静态网页设计）
主要内容：关于科学家的一些知识。

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。
在这里插入图片描述

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，或者点击下方的按钮可以手动切换图片。
在这里插入图片描述

代码：

<header id="head">
    <div class="con">
    	<ul class="left">
        	<li ><a href="index.html">首页</a></li>
            <li><a href="content.html">详情</a></li>
            <li><a href="expand.html">微扩展</a></li>
             <li><a href="vidio.html">视频微学习</a></li>
            <li><a href="discuss.html">论坛</a></li>
       </ul>
       <ul class="right">
            <li><a href="about.html">关于我们</a></li>
            <li><a href="login.html">登录</a></li>
            <li><a href="register.html">注册</a></li>
            <li><a href="user.html">个人中心</a></li>
       </ul>
    </div>
</header>

2、详情

该页面使用p标签和人span标签嵌入许多文本，将关于网站主题的介绍全部写到网页中，文字排版根据字数来进行，使用不会出现不协调的情况。在文字旁边，使用img标签嵌入一些图片，使得网页整体更加的美观。
在这里插入图片描述

代码：

<div class="c1">
    	<img src="images/p1.jpg">
        <h2>普朗克 - 德国物理学家</h2>
        <p>马克斯·普朗克(Max Planck，1858年4月23日-1947年10月4日)，出生于德国荷尔施泰因，是德国著名的物理学家和量子力学的重要创始人。和爱因斯坦并称为二十世纪最重要的两大物理学家。他因发现能量量子化而对物理学的又一次飞跃做出了重要贡献，并在1918年荣获诺贝尔物理学奖 。1874年，普朗克进入慕尼黑大学攻读数学专业，后改读物理学专业。1877年转入柏林大学，曾聆听亥姆霍兹和基尔霍夫教授的讲课，1879年获得博士学位。1930年至1937年任德国威廉皇家学会的会长，该学会后为纪念普朗克而改名为马克斯·普朗克学会 。从博士论文开始，普朗克一直关注并研究热力学第二定律。大约1894年发现普朗克辐射定律，并提出能量子概念和常数h(后称为普朗克常数)，1900年普朗克在德国物理学会上报告这一结果并获得了1918年诺贝尔物理学奖 。</p>
    </div>
    <div class="c2">
    	<img src="images/p2.jpg">
        <h2>居里夫人 -法国科学家</h2>
        <p>玛丽亚·斯克沃多夫斯卡-居里（波兰语：Marie Skłodowska-Curie，1867年11月7日－1934年7月4日），通常称为玛丽·居里或居里夫人，波兰裔法国籍女物理学家、放射化学家。玛丽·居里的成就包括开创了放射性理论，发明了分离放射性同位素的技术，以及发现两种新元素钋（Po）和镭（Ra）。在她的指导下，人们第一次将放射性同位素用于治疗癌症。她是巴黎大学第一位女教授，也是获得两次诺贝尔奖的第一人。但她最终因接触放射性物质，死于白血病。1995年，她与丈夫皮埃尔·居里一起移葬先贤祠。</p>
    </div>

3、登录注册论坛

该页面使用了form表单技术，可以填写并且提交文字信息，密码会被****字符代替，不会泄露密码，其他的名字则直接用明文的input标签。
在这里插入图片描述

在这里插入图片描述

<form action="#" method="post">
    <p>
    	<span>账号：</span>
        <input type="text" placeholder="请输入账号"/>
    </p>
    <p>
    	<span>密码：</span>
        <input type="text" placeholder="请输入密码"    maxlength="10" />
    </p>
    <p>
    	<input type="button" value="登录" class="bt"/>
    </p>
</form>

<form action="#" method="post">
        	<input type="text" placeholder="昵称"/>
            <input type="text" placeholder="请输入你的手机号码"/>
            <input type="text" placeholder="短信验证码" class="short"/>
            <span>请输入验证码</span>
            <p>请输入正确的验证码</p>
            <input type="text" placeholder="密码" maxlength="10"/>
            <input type="text" placeholder="确认密码" maxlength="10"/>
            <input type="submit" value="登录" class="button"/>
            <p>已有账号？马上登录</p>
        </form>