码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 前端:练习页面,(致美页面练习)


    目录

    • 所有练习页面成品截图
    • 开始讲解前的注意点
      • 注意点一
      • 注意点二
    • 各部分页面的讲解
      • 首页的创建及讲解点
      • 首页源代码
        • 注意

    所有练习页面成品截图

    在这里插入图片描述

    开始讲解前的注意点

    注意点一

    在创建较多的网页时,为了方便管理等。有必要将对应的前端,css,图片等类型的代码分别对应到一个文件里,如下图本人是这样分的:
    在这里插入图片描述
    点开任何一个文件后发现自己创建的文件名的后缀名都是与上图文件名对应的。
    如下点开css文件后发现我的css文件里面的文件全部是css后缀名结尾的文件。
    在这里插入图片描述
    html文件以及images文件里面对应的都是html文件以及对应的图片。这里不再点开一个一个的看

    注意点二

    文件在引入时尽量写相对路径引入,如果写绝对路径引入文件的话,有的人可能没有绝对路径里面的某个文件,这样就会出错。如在html文件里面要引入某个对应的css文件。:如下

    <link rel="stylesheet" type="text/css" href="../css/home.css">
    
    • 1

    上面的代码重点是

     ../css/home.css
     这就是相对路径。
    
    • 1
    • 2

    各部分页面的讲解

    从上面图可以看出我们主要有6个前端页面
    分别是:
    首页,关于致美,成功案例,新闻动态,在线质询,联系我们。
    所以需要写6个页面,但是我只做了其中5个,所以实际上我只讲解我做的那5个页面。

    首页的创建及讲解点

    首先为了规范,文件名尽量采用英文可以理解的语言,避免拼音。
    先在html文件夹下创建一个叫home.html的文件,然后用sublime编辑器打开这个home.html文件,再在里面写入前端内容。
    同时创建一个home.css的文件在css文件夹下,一边写html前端代码,一边在css文件里面写样式表
    注意:可以在边写的时候边运行看效果,效果不满意可以再修改css样式。

    其他页面的操作步骤基本一致。欢迎遇到问题咨询

    首页源代码

    因为6个页面的代码太多,所以各部分代码请查看我的专栏:前端完整项目案例—>致美网页练习完整代码。

    注意

    项目里面需要的图片可在评论区找我拿,欢迎咨询。

  • 相关阅读:
    ssm+爱尚购物 毕业设计-附源码211622
    【博客488】prometheus-----长尾问题,跳变问题,数据外推问题,增量丢失问题
    DataSheet专业名词解读——每天10个专业名词(1)23.9.18 (NXP)MPC5604B/C
    快领这500万?成都市生物医药产业发展专项政策的申报范围、条件和材料
    自媒体账号的流量推荐减少了很多?
    UDP与TCP协议
    (Java高级教程)第一章Java多线程基础-第一节4:synchronized关键字(监视器锁monitor lock)和volatile关键字
    刷题日记【第三天】
    Object.defineProperty和proxy代理模式
    二叉搜索树(搜索二叉树)模拟实现(有递归版本)
  • 原文地址:https://blog.csdn.net/fuyuo/article/details/126360655
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号