User:ZUZU/Study/Web02

From XPUB & Lens-Based wiki


I find that sorting by week isn't very logical.Next, I will organize it by days.


Day 01

practice web page

Header

<!DOCTYPE html>
  <header class="header">
    <div class="left-section">
      <div class="logo">logoooo</div>
    </div>
    <div class="middle-section">
      <input class="search-bar" type="text" placeholder=" ">
      <button class="search-button">
        <img class="search-icon" src="icons/search-icon.svg">
      </button>
    </div>
    <div class="right-section">
      <div class="button1-container">
        <img src="icons/Star.svg">
        <div class="tooltip">i dont know what is this</div>
      </div>
      <div class="button2-container"><img src="icons/Polygon.svg"></div>
      <div class="button3-container"><img src="icons/Ellipse.svg"></div>

    </div>
  </header>
.header {
  height: 15vh; /* 15% of the viewport's height */
  min-height: 160px; 
  display: flex; /* Turns the header into a flex container */
  flex-direction: row; /* Sets the direction of the flex items to be in a row (horizontal) */
  justify-content: space-between; /* justify-content used to style elements according to the main axis*/

  position: fixed; 
  top: 0; /* there is default gap between header and edge ,so it need to set them to 0 */
  left: 0;
  right: 0; 
  z-index: 100; 

}

Sidebar

Day 02

Article flow

Day 03

Add font to webpage

  • upload font files to web server or a CDN
  • define @font-face rules in css
@font-face {
    font-family: 'CentSchbook BT';
    src: url('path/to/CentSchbook-BT.woff2') format('woff2'),
         url('path/to/CentSchbook-BT.woff') format('woff');
  
}

DOM

Day 04

events