Wiki

User Tools

Site Tools

Trace: • eb_guide • web_component • new_pc_environment_setup • html_and_css

Sidebar

Important Note

Under Construction

Edit

html_and_css

**This is an old revision of the document!**

Table of Contents

html

add favicon to website

<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">

insert html code from another file

ref: https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file

Solution 1. Use jQuery.js 

<!doctype html>
<head>
<script src="script/jquery.js"></script> 
<script> $(function(){$("#nav_menu").load("nav_menu.html"); });</script> 
</head>


<body>
<div id="nav_menu"></div>
</div>
</body>

Solution 2. Use a custom javascript

a.html: 

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

b.js: 

document.write('\
    <h1>Add your HTML code here</h1>\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
');

Or just use the following handy bash script published as a Gist on Github, that automates all necessary work, converting b.html to b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

html_to_js.zip

Solution 3. Use htm file and frameset

CSS

在html中使用external stylesheet:

<link rel="stylesheet" type="tex/css" href="LSstyle.css">

ln -s /home/wwwroot/LSstyle.css LSstyle.css

不同的开头：

  1. define an id
    例如定义一个圆角id
    #fixWidthBlockRound { border-radius: 4px; }
  2. deine a class
    例如定义img tag的一个圆角class
    img.roundedCorner6px{ border-radius:6px; overflow:hidden; }

两者似乎可以互相替换：https://www.w3schools.com/code/tryit.asp?filename=FYJD2ER45BQL
但是class的定义方法必须得指定tag，不如id来得通用[?]

Code Example

参考资料：
* CSS dropdown menu https://catalin.red/css3-dropdown-menu/

html_and_css.1555400423.txt.gz · Last modified: 2019/04/16 15:40 by 60.239.57.71

Page Tools